CODEWITHSUNDEEP
cssfonts
Derek Erb
Derek Erb

Reputation: 130

font-face works in desktop Chrome & desktop Firefox but not in desktop Safari nor iOS browsers

My font-face is working properly on:

The same font-face call is NOT working on:

You can see the landing page with the font-family call for the site/company name here: Derek Erb Solutions

The font-family declaration:

@font-face {
font-family: 'Dce_handwriting';
src: url('/fonts/DceHandwritingRegular.woff') format('woff'),
url('/fonts/DceHandwritingRegular.ttf') format('truetype'),
url('/fonts/DceHandwritingRegular.otf') format('opentype'),
font-weight: normal;
font-style: normal;
font-display: fallback;

}

The font-family call:

#sitename {
font-family: Dce_handwriting, sans-serif;
font-size: 6em;
margin: 0 auto;

}

Looking around at similar problems here I made sure to remove the dashes and underscores from the file name and include the "src:" in the font-family declaration.

I have probably been looking too long at my own code to see the problem any more... but it is particularly frustrating.

Upvotes: 0

Views: 97

Answers (1)

Derek Erb
Derek Erb

Reputation: 130

As always the biggest part of the problem was a stupid semi-colon!

That last line should read:

url('/fonts/DceHandwritingRegular.otf') format('opentype');

With the all important semi-colon at the end of the line instead of the comma.

This fixed the problem on just about all of the browsers...

Upvotes: 0

Related Questions