font-face to import special font into website but it did not work well in safari

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

Solution

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>

font-face to import special font into website but it did not work well in safari

Further reading: