• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
1

how do I determine if an a dreamweaver adobe font is web safe?

Explorer ,
Dec 03, 2023 Dec 03, 2023

Copy link to clipboard

Copied

I have seen in several threads that only "web safe" fonts will work across "most browers".   How do I deternine which fonts are "web safe:?

 

 

I had tried to assign a font to my H3 selector after bring adding it to my font stacks. in dreamweavr 21.3 on MacOS as shown in the attached screen shots with no sucess

 

 

Screenshot 2023-12-03 at 4.08.24 PM.pngScreenshot 2023-12-03 at 4.09.16 PM.png

 

 

TOPICS
Browser , Publish

Views

593

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 2 Correct answers

Community Expert , Dec 03, 2023 Dec 03, 2023

The best thing you can do is to not use that feature in DW and just use the Web Projects feature from Adobe fonts to get code to embed the fonts that you need and not have to manage the fonts yourself as that tool originally did. https://helpx.adobe.com/fonts/using/add-fonts-website.html . You can also do something similar with Google fonts ( https://fonts.google.com/ ). 

Votes

Translate

Translate
Community Expert , Dec 04, 2023 Dec 04, 2023

First, fix your Code Errors.  Some of them are critical.

https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.kasdivi.com%2F

 

Second, your fonts are coming directly from Bootstrap.css as expected,  It's the last stylesheet in your stack which gives it highest priority.  See screenshot.

image.png

 

Currently, these font-families are being used throughout your site.

--font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Em

...

Votes

Translate

Translate
Community Expert ,
Dec 03, 2023 Dec 03, 2023

Copy link to clipboard

Copied

The best thing you can do is to not use that feature in DW and just use the Web Projects feature from Adobe fonts to get code to embed the fonts that you need and not have to manage the fonts yourself as that tool originally did. https://helpx.adobe.com/fonts/using/add-fonts-website.html . You can also do something similar with Google fonts ( https://fonts.google.com/ ). 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Dec 03, 2023 Dec 03, 2023

Copy link to clipboard

Copied

Thanks for the quick response.   I am working on it. as it is a little time consuming  shall see how it goes and let your know,

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Dec 07, 2023 Dec 07, 2023

Copy link to clipboard

Copied

Ok  I am far from proficient in CSS.    I have added the link to my web project to my sample web page.   I can not figure a  way. to  use this linked CSS.   My efforts in DW using the CSS Designer has "sort of " show me some selectors

 

Screenshot 2023-12-07 at 2.11.16 PM.png

 

Bsed on the I have build a test page ( show in design/live mode)

 

Screenshot 2023-12-07 at 1.42.02 PM.png

I have upload the result to http://kasdivi.com/jantest.html.

The web safe fonts that Nancy steered me are shown as expected.   The "embeded ones are not.   

Can any one refer me to an tutorial for dummies that would help.   I can probably get by with the web safe but....

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 07, 2023 Dec 07, 2023

Copy link to clipboard

Copied

LATEST

Typekit stylesheet cannot be edited. You don't have access to it.  pnj4cok.css is a read only file that brings custom web fonts from typekit into your document.  That's all it does. 

 

Best advice, don't use the CSS Designer Panel for this.

  1. Open your stylesheet, responsivelayout.css in code view.
  2. Create styles manually with code hints and auto-code completion.  It's faster & more precise than panels.  For example,
    h3 {font-family:"ltr-federal-bureau-12-diago";}
  3. Open your HTML document.  Swap the stylesheet order with typekit on top and responsivelayout.css below it.  Add a hook for your new h3 style inside the <body> tag of your document like this:
    <h3>This is a test of ltr-federal-bureau-12-diago font from Typekit</h3>

Post back if you need more help.

 

 

Nancy O'Shea— Product User, Community Expert & Moderator

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 03, 2023 Dec 03, 2023

Copy link to clipboard

Copied

CSS Font Stack has a complete list of web safe font-families that are commonly installed on PC's & Macs.

https://www.cssfontstack.com/

 

Example: 

{font-family: Lucida Grande, Lucida Sans Unicode, Lucida Sans, Geneva, Verdana, sans-serif;}

If the first font isn't available, the next one is used or the next one, and so on...

 

For special text & headings,  you can source fonts directly from Adobe Fonts or Google Fonts by copying & pasting their embed code into the <head> of your documents. Style with CSS as normal.  NOTE:  It takes a little longer for sourced fonts to load as they're coming from the source's servers.  But if you don't overuse them, it shouldn't be a problem.

https://helpx.adobe.com/fonts/using/add-fonts-website.html

 

Nancy O'Shea— Product User, Community Expert & Moderator

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Dec 03, 2023 Dec 03, 2023

Copy link to clipboard

Copied

Thanks agaijn for ypur help nancy.  I had been using a PHP Dynamic text replacement but as seems to happen in most good stuff It was deprecated.  Your lists will help a lot

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Dec 04, 2023 Dec 04, 2023

Copy link to clipboard

Copied

OK I tried bothe approaches , embedding and using "web safe". Neither has any result

My applicable CSS sestion foe using web safe is attached.   The results are can be seen at www.kasdivi.com.  Ale the headeds in the canteal section have the <h3> selector..

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 04, 2023 Dec 04, 2023

Copy link to clipboard

Copied

First, fix your Code Errors.  Some of them are critical.

https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.kasdivi.com%2F

 

Second, your fonts are coming directly from Bootstrap.css as expected,  It's the last stylesheet in your stack which gives it highest priority.  See screenshot.

image.png

 

Currently, these font-families are being used throughout your site.

--font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";


--font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;

 

My browser's INSPECT panel (F12) shows a reference to Brush Script MT higher up in the stack (responsivelayout.css) but that's  ignored.  If you want to give it a higher priority than Bootstrap, move it lower in the stack.  DO NOT EDIT BOOTSTRAP CSS!

 

Hope that helps.

 

Nancy O'Shea— Product User, Community Expert & Moderator

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Dec 04, 2023 Dec 04, 2023

Copy link to clipboard

Copied

Nancy.  Once again you nailed it .  I hve become lax and maintaining stuff and honest truth had a completely backwards understanding of how the cascade (for lack of a better word) occured.  I , like my OS, amd getting close my EOL.   A bit more comforable but in the end CSS is a lot smarter then me

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines