Including Google Fonts link or import?

Question

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

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

Via import in a stylesheet

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

Using the Web Font Loader

You might also want to read [this question](http://stackoverflow.com/a/19969239/1244126) before using google fonts at all . depending on the specific project - it might not always be the smart choice . — Obmerk Kronen, Jun 05 '16 at 21:11
Why do we need the preconnect links? I tried this without the preconnect links and it worked fine — enigma6174, Jan 18 '22 at 19:01

score 425 · Accepted Answer · edited Nov 22 '18 at 15:14

425

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

edited Nov 22 '18 at 15:14

Sayed Mohd Ali

2,156
3
12
28

answered Sep 12 '12 at 01:12

igrigorik

9,433
2
29
30

1

"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) – Alex Jul 15 '14 at 10:53
2

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. – rvighne Jul 21 '14 at 00:05
29

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. – Gal Apr 20 '15 at 04:38
6

Google's own '[Getting Started](https://developers.google.com/fonts/docs/getting_started?hl=en)' tutorial uses only the `` method, so I guess that's the one they recommend in an unspoken fashion – James Cushing Oct 20 '15 at 13:34
4

You may want to add `rel="preload"` to the `` tag, too, because then the font will be loaded before the text appears. See https://3perf.com/blog/link-rels/ – Elijah Mock Nov 27 '19 at 02:18
the google fonts `` 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! https://stackoverflow.com/questions/52764401/what-are-the-differences-between-html-preload-and-prefetch – Simon_Weaver Sep 02 '21 at 22:04

score 18 · Answer 2 · edited Nov 27 '19 at 06:20

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/

score 8 · Answer 3 · answered Jun 03 '19 at 08:18

8

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

answered Jun 03 '19 at 08:18

Mark Cilia Vincenti

1,410
8
25

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` – BadHorsie Jan 15 '20 at 17:45
3

@BadHorsie 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. – Mark Cilia Vincenti Jan 16 '20 at 21:39

Feng Jiang · Answer 4 · 2021-05-29T04:36:03.750

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.

score 0 · Answer 5 · answered Oct 12 '22 at 03:55

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.

score 0 · Answer 6 · edited Aug 12 '23 at 17:31

0

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

edited Aug 12 '23 at 17:31

Yaroslavm

1,762
2
7
15

answered Aug 02 '23 at 20:21

Nightwaves

1
2

Including Google Fonts link or import?

6 Answers6

Linked