-1

I am using @font-face to import Hack font ttf file into my website like this


@font-face {
    font-family: Hack;
    src: url("https://cdnjs.cloudflare.com/ajax/libs/hack-font/3.3.0/web/hack.min.css");
    -webkit-font-smoothing: antialiased;
    // src: url("\font\Hack-Bold.ttf");
    // src: url("\font\Hack-Regular.ttf");
    // src: url("\font\Hack-BoldItalic.ttf");
}

it renders well in chrome and desktop but it did not rendered in safari. wandering to know how to fix it.Thx!

I try to delete the cache in the safari but it did not work as well

pineapple
  • 3
  • 1

1 Answers1

0

Your @font-face rule is wrong.
Probably you see the font applied on desktop because you've also installed it locally.

Since your font is hosted on a cdn you need to load the font via link element or @import like so:

link in your HTML <head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hack-font/3.3.0/web/hack.min.css">

@import in your main css file

@import url("https://cdnjs.cloudflare.com/ajax/libs/hack-font/3.3.0/web/hack.min.css");


@import url("https://cdnjs.cloudflare.com/ajax/libs/hack-font/3.3.0/web/hack.min.css");


body{
    font-family: Hack;
}
<p>Should be hack font-family</p>

Further reading:

mdn docs: How to use "@font-face"
SO question: Multiple font-weights, one @font-face query

herrstrietzel
  • 11,541
  • 2
  • 12
  • 34