Font links not working consistently/font best practices

[REELHERO]

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?

[Nancy OShea]

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 OShea]

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

[REELHERO]

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]

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.

[REELHERO]

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-