6

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.

MadzQuestioning
  • 3,341
  • 8
  • 45
  • 76
  • 1
    Link is faster. Everything inside the `` 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. – Red Feb 27 '18 at 13:52
  • 1
    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. – Mike 'Pomax' Kamermans Feb 27 '18 at 23:47

3 Answers3

9

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

Red
  • 6,599
  • 9
  • 43
  • 85
  • 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_. – Luke Feb 27 '18 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. – Bangkokian Mar 12 '20 at 16:07
1

Very misleading answer above.

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

Jiulin Teng
  • 299
  • 3
  • 8
1

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.

Joy
  • 11
  • 1