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

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

回答1:

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?

来源：https://stackoverflow.com/questions/49010310/which-load-faster-font-face-or-link

标签

css

fonts

google-font-api