Including Google Fonts link or import?

Question

What is the preferred way of including Google Fonts on a page?

1. Via the <link> tag

   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Judson:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
   

2. Via import in a stylesheet

   @import url('https://fonts.googleapis.com/css2?family=Kameron:wght@400;700&display=swap');
   

3. Using the Web Font Loader

Pox

You might also want to read this question before using google fonts at all . depending on the specific project - it might not always be the smart choice . – Aleph

@ObmerkKronen for the Link – Scarfskin

Why do we need the preconnect links? I tried this without the preconnect links and it worked fine – Erasure

Answer 1

For 90%+ of the cases you likely want the <link> tag. As a rule of thumb, you want to avoid @import rules because they defer the loading of the included resource until the file is fetched.. and if you have a build process which "flattens" the @import's, then you create another problem with web fonts: dynamic providers like Google WebFonts serve platform-specific versions of the fonts, so if you simply inline the content, then you'll end up with broken fonts on some platforms.

Now, why would you use the web font loader? If you need complete control over how the fonts are loaded. Most browsers will defer painting the content to the screen until all of the CSS is downloaded and applied - this avoids the "flash of unstyled content" problem. The downside is.. you may have an extra pause and delay until the content is visible. With the JS loader, you can define how and when the fonts become visible.. for example, you can even fade them in after the original content is painted on the screen.

Once again, the 90% case is the <link> tag: use a good CDN and the fonts will come down quick and even more likely, be served out of the cache.

For more info, and an in-depth look at Google Web Fonts, check out this GDL video

Erinaceous

"because they defer the loading of the included resource until the file is fetched" - isn't that a good reason to use @import? Because normally you don't want to see the content until the font has loaded (to avoid that font flicker) – Meyeroff

The Web Fonts API is very useful when working with HTML5 Canvas. You can't use a font that hasn't finished loading before drawing text with it, and of course once the font is loaded it isn't automatically updated. Relatedly, the API is needed for tracking progress of loading assets, e.g. in a game. – Greta

This information should be on the Google Web Fonts page. It just presents the three options to you - and doesn't give any helpful hints as to which one to use and when. – Keck

Google's own 'Getting Started' tutorial uses only the <link> method, so I guess that's the one they recommend in an unspoken fashion – Timorous

You may want to add rel="preload" to the <link> tag, too, because then the font will be loaded before the text appears. See 3perf.com/blog/link-rels – Cacuminal

the google fonts <link> tag now uses rel="preconnect" . This will speed up DNS and the TLS / TCP connection to the server without using up bandwidth right away in downloading the font. I think the idea here is to get the handshaking out of the way ASAP (which can take time) but without using up too much bandwidth. Fonts are ultimately not as important as other resources on the page. So preconnect is a best of both worlds approach. You can't preload everything unfortunately! #52764901 – Statolith

Answer 2

If you are concerned about SEO (Search Engine Optimization) and performance, it's good to use the <link> tag because it can preload the font.

Example:

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/quicksand/v7/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.woff2" as="font" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2" as="font" crossorigin>
<style>
@font-face {
 font-family: 'Lato';
 font-style: normal;
 font-weight: 400;
 src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
 font-family: 'Quicksand';
 font-style: normal;
 font-weight: 400;
 src: local('Quicksand Regular'), local('Quicksand-Regular'), url(https://fonts.gstatic.com/s/quicksand/v7/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
</style>

For more info read this: https://ashton.codes/preload-google-fonts-using-resource-hints/

Dade

Answer 3

I understand the suggestion from other answers is to use <link> in the html files.

I recently realized that there is a use case for me to use @import inside the css file.

The reason is simple: I am making static sites for my side projects and I value convenience way over SEO or compatibility to rare platforms, etc.

The benefit of using @import inside the css file is that if I want to change the fonts, all I need to do is modify a few lines in the css file. That's it, end of the story. If I use <link> in the html files, in addition to change the font in the css file, I will also have to update and upload all the html files, which is kind of inconvenient.

So long story short: @import is self-contained inside the css file, so it's convenient for update. And it's especially useful for testing and trying different fonts.

Mindoro

Answer 4

Use the <link> provided by Google because there is versioning on the font, but right above it use HTML5's preconnect feature to ask the browsers to open a TCP connection and negotiate SSL in advance with fonts.gstatic.com. Here's an example, which obviously needs to reside in your <head></head> tag:

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

Intercommunicate

Is it correct that the preconnect is a completely different domain than the stylesheet link in your example? fonts.gstatic.com versus fonts.googleapis.com – Krems

@Krems it's the whole point of it. The stylesheet on fonts.googleapis.com has a link to a resource on fonts.gstatic.com. You're telling the browser to initiate a connection to the latter host so that it would have connected or started connecting by the time it finds the link in the stylesheet. – Intercommunicate

Answer 5

Thanks for all the great answers. My recent experience with React app project is also align with the accepted answer. It's better you use link if you are loading it from CDN. If the font is in your local directory then loading it using import or link will not have too much significant difference. But if you are loading it using a third party CDN then it's always better to use link. It's faster and you will get preload and cache support.

Sorehead

Answer 6

I personally prefer <link>.

This is how I upload my fonts:

<link href="https://fonts.googleapis.com/css2?family=Judson:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">

Christiniachristis