Font links not working consistently/font best practices

Forum|Forum|2 years ago
December 12, 2023
2 replies
850 views

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?

This topic has been closed for replies.

Nancy OShea

Community Expert

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

R

REELHEROAuthor

Inspiring

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..

Jon Fritz

Community Expert

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.

Nancy OShea

Community Expert

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-font-is-web-safe/m-p/14275337#M226727

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

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded