CSS Custom Font Not Displaying on Most Browsers

Elements Typography
1

Having an issue where a custom CSS font is not displaying correctly in most browsers. Results:

Displays Correctly:
Chrome - Desktop

Displays Incorrectly:
Safari - Desktop
Firefox - Desktop
Safari - iOS
Chrome - iOS

Here’s the HTML head code:

HTML-head
HTML-head.png1288×352 36.2 KB

And how I entered it:

Font-entry
Font-entry.png1122×1098 557 KB

Here’s how it should look, and how it does in Hype and Chrome:

Looks-Correct
Looks-Correct.png1666×1234 656 KB

Here’s how it looks in Safari, Firefox, and iOS:

Looks-Incorrect
Looks-Incorrect.png1594×1232 360 KB

Am I doing something wrong that I’m missing somehow? Any advice appreciated… John

2

I think you should set the CSS Font-Family without the ' on either side?

3

Also feel free to attach a zip of your .hype document; often it is hard to tell what is happening without a live version. I’d recommend looking in the web developer console and see if there are any errors.

4

Doing a simple test using a custom font, with or without the single quotes works with no problems here in Safari etc…

 <style >
    @font-face {
      font-family:  'Digital-mono' ;
      src: url('${resourcesFolderName}/DIGITALDREAM.ttf') format('truetype');
    }
   
  </style>

And I tried a digital-7-mono.ttf file. This was ok also.

It may be an issue with that particular file. Have you tried a different one…

1 Like
5

Thank you all for your suggestions. It seems it came down to a problem with that particular font.

3 Likes