CODEWITHSUNDEEP
cssfontsgoogle-font-api
MadzQuestioning
MadzQuestioning

Reputation: 3772

Which load faster @font-face or link

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'>

vs

@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.

Upvotes: 9

Views: 11870

Answers (3)

Joy
Joy

Reputation: 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.

Upvotes: 1

Jiulin Teng
Jiulin Teng

Reputation: 364

Very misleading answer above.

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

Upvotes: 1

Red
Red

Reputation: 7324

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: ... ; }

Upvotes: 12

Related Questions