0

My font-face is working properly on:

  • Desktop Chrome
  • Desktop Firefox

The same font-face call is NOT working on:

  • Desktop Safari
  • iOS Chrome
  • iOS Firefox
  • iOS Safari

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.

1
  • For info, after reading some other threads here, I added the following to my .htaccess file: AddType font/ttf .ttf AddType font/eot .eot AddType font/otf .otf AddType font/woff .woff No change. Same symptoms. Same Problems.
    – Derek Erb
    Nov 11, 2019 at 18:30

1 Answer 1

0

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

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.