How to preload material icons using rel=preload?

Question

I am trying to optimize my webpage with google lighthouse.

The report says to use rel=preloads on links that import Material Design Icons.

I have tried to preload them using syntax.

<link rel="preload" href="" as="style" crossorigin>

I have also tried to preload using as font. with type woff, woff2 and ttf. None of them seem to work. I have also added crossorigin and crossorigin="anonymous" but still no progress.

These are my actual links. I want to import both of them.

<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css" as="style">
<link rel="preload" href="https://fonts.googleapis.com/icon?family=Material+Icons" as="font" type="font/woff" crossorigin>

How should use these links with preload?

Have you take a look into https://developers.google.com/web/tools/lighthouse/audits/noopener ? — Ronnie Oosting, Aug 16 '18 at 09:43
not yet. I left it be for a while. will update if I find anything. — GreedyAi, Sep 05 '18 at 14:47
Here is a very useful article I found on this topic: https://ashton.codes/preload-google-fonts-using-resource-hints/ . Hope it helps others looking to know it in-depth. — Krishnan, May 27 '22 at 12:56

szymond · Answer 1 · 2020-09-11T14:38:38.037

I would expect Google prepared preload info in it font guide, but there's only normal CSS example [1].

Anyway, I hacked the solution by adding:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons&display=swap" media="print" onload="this.media='all'" crossorigin>

(this seems to be a good fallback mechanism for not supported preload, so it's good to have anyway).

Also, to get rid of "blink" of name of icon, I am using code points [3]. Like that:

<i class="material-icons"></i> (instead of <i class="material-icons">face</i>).

That way, during font load I get almost invisible symbol like □ instead of full "face".

[1] - https://google.github.io/material-design-icons/

[2] - https://csswizardry.com/2020/05/the-fastest-google-fonts/

[3] - https://github.com/google/material-design-icons/blob/master/iconfont/codepoints

score 2 · Answer 2 · answered Apr 30 '20 at 11:09

2

This worked for me:

<link 
  rel="preload"
  as="style" onload="this.rel = 'stylesheet'"
  href="https://fonts.googleapis.com/icon?family=Material+Icons">

answered Apr 30 '20 at 11:09

kundan

1,278
14
27

This is quite clever, but I don't think I'd recommend this method unless it's a last-resort. – GreatBlakes Dec 12 '20 at 18:14
@GreatBlakes Why is it not recommended? Could you elaborate in your comment? It is the only thing that actually worked so far... – Wilt May 29 '23 at 07:50
The embedded onload attribute JS that changes this into a stylesheet link seems a little hacky and on larger projects may be confusing and difficult to troubleshoot. If it's the only way you've found that works, go for it– I'd just document it as much as possible so your collaborators (or yourself in the future) can debug it without confusion later on. – GreatBlakes May 30 '23 at 13:39

score 1 · Answer 3 · answered May 31 '21 at 17:28

I noticed that Google Fonts places a &display=swap to the end of the link when getting the url. So when we change it to display=block it would make a change in the css file on the server side:

font-display: block;

So use it like this:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">

score -1 · Answer 4 · answered Dec 17 '18 at 16:00

-1

<link rel="preload" href="https://fonts.gstatic.com/s/materialicons/v41/flUhRq6tzZclQEJ-Vdg-IuiaDsNZ.ttf" as="font" type="font/ttf" crossorigin="anonymous">

<style>
  @font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
  }
  .material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
  }

</style>

answered Dec 17 '18 at 16:00

CESCO

7,305
8
51
83

Not sure why this answer is down-voted. Looks like it is only missing the `src` attribute in `@font-face` definition, e.g. `src: url(https://fonts.gstatic.com/s/materialicons/v41/flUhRq6tzZclQEJ-Vdg-IuiaDsNZ.ttf)`, but otherwise this is how you want to download the "font" file itself. Preloading the CSS does not really help much to resolve that Lighthouse warning until you preload the font file too. – Krishnan May 27 '22 at 13:04

How to preload material icons using rel=preload?

4 Answers4

Linked