'Font not displaying in Safari

@font-face {
  font-family: 'Gotham';
  src: url('../../assets/fonts/GothamBook.ttf') format('truetype'),
    url('../../assets/fonts/gothambook-webfont.woff') format('woff'),
    url('../../assets/fonts/gothambook-webfont.woff2') format('woff2');
  font-weight: 400;
}

@font-face {
  font-family: 'Gotham';
  src: url('../../assets/fonts/GothamBold.ttf') format('truetype'),
      url('../../assets/fonts/gothambold-webfont.woff') format('woff'),
      url('../../assets/fonts/gothambold-webfont.woff2') format('woff2');
  font-weight: 700;
}

body {
  font-size: 1.6rem;
  font-family: 'Gotham', 'Arial', 'Helvetica', sans-serif;
}

See above css. This works fine on Chrome, Firefox and Edge. But in Safari the text sometimes simply doesn't show. So it doesn't even go to the fallback, it just doesn't show.

This seems to be especially the case when the text is dynamically inserted with JavaScript. I can see the text in the inspector but not in the viewport. It always shows up when using:

font-family: 'Helvetica', sans-serif;

Any ideas?

htmlcssfontssafari


Solution 1:[1]

Perhaps your Safari version does not support the fonts, maybe you can change into another one.

E.g.:

font-family: "Georgia", "Times New Roman", //[...]

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Yongle Liu

Related Questions