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

Font links not working consistently/font best practices

Contributor ,
Dec 12, 2023 Dec 12, 2023

Copy link to clipboard

Copied

Im having an issue getting webfonts to link correctly on all browsers for all users - it shows sometimes and sometimes it reverts to a serif font like times roman (screenshot below- also attached the way it is supposed to look) - often after it loads correctly on the landing page then reverts to a serif font upon clicking deeper into the site:

 

https://andylilien.com/

 

the font style sheet for the site https://andylilien.com/css/font_stylesheet_al.css

 

and the header font styling as an example:

 

.siteTitle h2 a{	
	font-size: 32px;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: #204d52;
	font-family:"cf_dots_521regular", "sans-serif";
	font-weight: normal;	
	}	
 
 
is there anything I am doing incorrectly? 
font vs font-family?
" vs ' ? in the class or in the font  stylesheet?
relative links in the font stylesheet vs direct links?

Views

159

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 12, 2023 Dec 12, 2023

Copy link to clipboard

Copied

It's best to use font-families.  See this related topic from a few days ago.

https://community.adobe.com/t5/dreamweaver-discussions/how-do-i-determine-if-an-a-dreamweaver-adobe-...

 

Use your browser's Inspect feature (F12) to see which font has priority in the stack and where it's coming from.

 

Hope that helps.

 

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

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 12, 2023 Dec 12, 2023

Copy link to clipboard

Copied

Check your code and fix the warnings & errors.  The devil is in the details.

https://validator.w3.org/nu/?doc=http%3A%2F%2Fandylilien.com%2Ffood_tabletop%2F

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

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
Contributor ,
Dec 13, 2023 Dec 13, 2023

Copy link to clipboard

Copied

thank you Nancy - i will validate and correct all the pages - lots of little devils there 🙂

 

re: the fonts - it turned out it was an old version of chrome that was causing the issue as soon as my friend updated her chrome all fonts appeared correctly.. Thats why I couldnt recreate the problem, all my browsers are updated..

 

Is there anything to do about that? Im sure some of the audience will be on outdated browsers..

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 13, 2023 Dec 13, 2023

Copy link to clipboard

Copied

That is what your font-family css property's list is for.

You can use whatever linked webfont you want as the first item in the font-family css list. Most machines will see it and everything will be great there. Then you fall back to the "Web Safe" fonts later in your stack. Those fonts are installed by default on the most devices (times, arial, etc).

If the first font in the font-family list isn't available, the device will move to the next. If that's also unavailable, it moves further down the list in your CSS. You decide what it should fall back to by listing the various fonts in the order you prefer.

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
Contributor ,
Dec 20, 2023 Dec 20, 2023

Copy link to clipboard

Copied

LATEST

thanks all - I had the font paths and backup fonts correct - it really was a browser issue -

I solved it by encoding the fonts to a base 64 css page- now firefox and older browser load the fonts-

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