0

I'm using CSS, the font file .ttf, and the font "Dirty Headline".

my code looks like this:

@font-face {
    font-family: 'Dirty Headline';
    src: url("./fonts/Dirty Headline.ttf") format('truetype');
}

The Problem

On Chrome on Linux, the font works fine. However, on Mac on Chrome, the font doesn't work. On Windows on firefox, it works fine, however on Linux on firefox it doesn't.

Why does my font not work on some browsers and operating systems? Also, How can I fix this?

***** Edit *****

I changed my code to

@font-face {
  font-family: "Dirty Headline";
  src: url("./fonts/Dirty Headline.ttf") format("truetype"),
       url("./fonts/Dirty Headline.woff") format("woff"),
       url("./fonts/Dirty Headline.woff2") format("woff2"),
       url("./fonts/Dirty Headline.otf") format("opentype"),
       url("./fonts/Dirty Headline.eot") format("embedded-opentype");
}

still the same result, I'm unsure how to debug this

Mike 'Pomax' Kamermans
  • 49,297
  • 16
  • 112
  • 153
throwawayryan
  • 73
  • 1
  • 8
  • 1
    Start by simplifying your CSS because you should not be using ttf, or otf, or eot, or svg, or `local()` in 2020. Start by [only using woff2 and woff](https://stackoverflow.com/questions/36105194/are-eot-ttf-and-svg-still-necessary-in-the-font-face-declaration/36110385#36110385), and then take it from there. As for "I'm unsure how to debug this": open your dev tools and make it show all errors and warnings, because either you have 404s for your webfonts, or you have _parse errors_ for your font, which the browser will tell you about. – Mike 'Pomax' Kamermans Oct 14 '20 at 22:49

2 Answers2

1

Font formats varies depending on browser and OS ; your can create a set of files using tools like fontsquirrel (assuming of course you have the correct license for this use). Plus formats like woff and woff2 are far lighter than ttf.

MarvinLeRouge
  • 444
  • 5
  • 15
1

Web Open Font Format (WOFF) developed in 2009 as a wrapper format for TrueType and OpenType is supported by all modern browsers! Try converting the font to this format and use it!

Nil
  • 342
  • 1
  • 13
  • 1
    I converted your font to woff/woff2, put it on a server with a test page and a micro css file, and it worked. My css was : @font-face { font-family: 'dirty_headlineregular'; src: url('/assets/webfonts/dirty_headline-webfont.woff2') format('woff2'), url('/assets/webfonts/dirty_headline-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } body { font-family: 'dirty_headlineregular', Arial, sans-serif; } – MarvinLeRouge Oct 13 '20 at 10:04