Which load faster @font-face or link

Asked 27/2, 2018 at 13:51 Answered 14/6, 2022 at 22:25

I'm trying to find out which one loads faster. Upon checking the audit tab in Chrome both approach result in a slow First meaningful paint. I'm using googleapi font to render fonts in my site. Below are the codes I'm comparing

<link href='https://fonts.googleapis.com/css?family=Montserrat&subset=latin' rel='stylesheet'>

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

Now it seems that hosting the font on my local directory loads slower. I'm not sure if what I'm doing is correct. Any idea which one is faster and what is the best way to implement this?

I'm just trying to cut down the First meaningful paint down to half. I used the link in to reference the googleapi but upon checking the audit its taking 1,500ms just to load this from googleapi site.

Kristinkristina answered 27/2, 2018 at 13:51 Comment(4)

Link is faster. Everything inside the <head> tag will be loaded before everything else. If you put it inside the css file, it loads it after the css file has been loaded. – Tabulator 27/2, 2018 at 13:52

What do you mean with or? Those are the same thing: the link you show points to a CSS file with (lots of) @font-face rules. So technically the link is slower because in both cases it's the same CSS, just one is direct and the other requires following a link source, but practically this should be entirely irrelevant. If your page is so fast that you can't even measure the difference in speed yourself, this is not a problem even worth asking about. – Basketball 27/2, 2018 at 23:47

@Mike'Pomax'Kamermans the <link> tag offers a more optimized approach for font delivery even though both methods rely on the same underlying technology. (6 years after the comment ^^) – Tabulator 23/4 at 12:12

But it's worth pointing out why: it took Google forever to drop all the dead font-face rules and switch to purely WOFF2 combined with the CSS unicode-range property, it's only been more sensible to use <link> since they switched to sending browsers good font-face CSS =) – Basketball 23/4 at 15:57

Everything you put inside the <head> tag will be loaded before everything else.

So the <head> first loads the css file, after that it loads the @font-face.

If load the font inside the <head> using <link>, the browser will first load the font, then the css file.

So <link> will be faster in terms of performance. Not that it will be a huge / notable difference.

Also:

In your example there is also a difference with loading it with from google's cdn or serve it from your local server.

Cdn's are meant to serve files really fast. Depending what server you have, Im pretty sure google's servers are way, way fasterf. So google's option loading it with the <link> tag is the recommended way to go.

See also this SO question, its about @import. But its just the same as @font-face { src: ... ; }

Including Google Web Fonts link or import?

Tabulator answered 27/2, 2018 at 13:57 Comment(2)

Assuming the font file is sourced from the same location, using either method won't result in it loading faster, but it does affect whether it loads sooner. – Octahedron 27/2, 2018 at 14:21

I'm not so sure this is still true. Google Lighthouse is now recommending font-display:swap which would suggest they are also recommending @font-face. – A1 12/3, 2020 at 16:7

Very misleading answer above.

The <link> loads a CSS with @font-face inside. It is verifiably slower.

Trave answered 26/8, 2021 at 7:4 Comment(1)

Both of them use @font-face. So the link still remains the faster option, as its loaded before the css. A few points to consider, the link makes only 1 http request and the link benefits of the CDN – Tabulator 23/4 at 12:11

We should design code so that web pages load fast; however, a user's device can affect slow down the loading of web pages. For this reason, I take into account how slow a web page could load for some users when designing and coding my web pages. Linking to the font in the HTML will quicken the font face being displayed before other styles. However, I would rather styles for images and the like to be displayed as soon as possible. Changes in such elements can be rather jarring, so I use @font-face in my main CSS file instead of linking to font files in the HTML.

Outride answered 14/6, 2022 at 22:25 Comment(0)

Recommended topics

Hot tags