Preloading Google Fonts

Question

Light House audit is suggesting that I preload key requests, specifically the two google fonts that I'm using in my React app. A Light House member suggested using: <link rel="preload" as="style" href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto:700" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>

I know it's making the request because I see it in the waterfall and I get this console warning:

"The resource https://fonts.googleapis.com/css?family=Open+Sans|Roboto:700 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally."

Unfortunately the two font do not display in my app anymore. Do I need to define these in my CSS with @font-face or something like that?

I can't see your code, but I'd guess you *replaced* the `` with the ``. This is not sufficient. You'll need both, the `preload` and the `stylesheet`. — Loilo, Jun 12 '18 at 19:37
Not quite yet. You're not supposed to combine those tags into one but rather preserve both. You'll eventually end up with two `` tags for each font. One for `preload`, one `stylesheet`. — Loilo, Jun 12 '18 at 20:53
Without adding the crossorgin property I get a render blocking stylesheet warning from LightHouse but, this whole endeavor to preload font fonts per Chrome's suggestion as upped my first meaningful paint to 3620ms from 2650ms and lower my lighthouse score from 88 to 79. — wildair, Jun 12 '18 at 21:27
I also tried combining the tags like this: Which helped a little bit but, in trying to optimize I have inadvertently slowed everything down... — wildair, Jun 12 '18 at 21:27

score 44 · Answer 1 · answered Jul 02 '19 at 05:36

44

The correct way to preload a font would be by adding both a preload link and a stylesheet. A simplified example, based on MDN is as follows:

<head>
  <meta charset="utf-8">
  <title>Preloading fonts</title>

  <link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto&display=swap" as="style">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto&display=swap">
</head>

<body>
</body>

In the above example, the preload link will send a request to fetch the font regardless of it being installed or not on the client and then use the stylesheet link to properly load and use it.

preload is more of a way to tell the browser that a resource will probably be needed, so that it will be requested regardless and then, if you need it or decide to use it, you can.

Further information

answered Jul 02 '19 at 05:36

Angelos Chalaris

6,611
8
49
75

1

I think you meant to say preload `as="font"` – monchisan Jul 28 '19 at 19:45
19

@monchisan No, the `as="style"` attribute is correct. Google is serving a CSS which contains the @font-face declarations. – interDist Feb 13 '20 at 16:34
6

@Angelos Chalaris I think its preload CSS only not the fonts – Mantu Nigam Mar 09 '20 at 07:09
1

you don't need `crossorigin` for `preload`? thanks for your help! – Crashalot Aug 12 '21 at 04:48
5

This will NOT preload the font. This will only preload the stylesheet which tells the browser where to fetch the font when it wants to. – André Chalella May 29 '22 at 13:43
@AndréChalella is correct, this doesn't preload the font. – Emperor Eto Mar 19 '23 at 20:08

Michael Moriarty · Answer 2 · 2022-04-29T16:44:05.873

37

It is recommended that you preconnect, then preload, and then finally load as follows:

<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
<link rel='preload' as='style' href='https://fonts.googleapis.com/css2?family=Open+Sans|Roboto:wght@700&display=swap'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Open+Sans|Roboto:wght@700&display=swap'>

You cannot just preconnect and/or preload, you still need to load as usual. Then you just specify any font weight that is not the default for that given font by using :wght@700, for example. Between successive fonts you put the pipe | sign.

edited Apr 29 '22 at 16:44

answered Jun 05 '20 at 16:24

Michael Moriarty

831
13
16

1

useful resource: https://www.cdnplanet.com/blog/faster-google-webfonts-preconnect – Gangula May 17 '21 at 09:54
2

Most complete comment. I've noticed that Google has recently changed the URL replacing *css* with *css2*. – AlexWebLab Jun 01 '21 at 01:31
1

you don't need `crossorigin` for the preload, only preconnect? – Crashalot Aug 12 '21 at 04:47
1

Thank you @Alex. I updated my code with css2 as you pointed out. – Michael Moriarty Feb 26 '22 at 16:56
Yes, @Crashalot you do need crossorigin and it is already in my first line of code. – Michael Moriarty Mar 30 '22 at 03:37

score 1 · Answer 3 · answered Mar 02 '22 at 10:40

1

google always serve font from same domain fonts.gstatic.com

so preload it before adding style.

<link rel="preconnect" href="https://fonts.gstatic.com/">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto:700">

answered Mar 02 '22 at 10:40

Khazi Afzal

121
2
3

What you say is ambiguous. The 'preconnect' is to give your website a heads up and gets it connected to Google. The preload that you are missing indicates what you will be loading. And finally, you load the font(s) as you indicated using the api. – Michael Moriarty Jul 30 '23 at 18:29

Preloading Google Fonts

3 Answers3

Linked