CODEWITHSUNDEEP
htmlangularseofont-facepagespeed
Marcell
Marcell

Reputation: 111

Google PageSpeed "Ensure text remains visible" with 0ms potential saving

Image reference of the 0ms potential saving message

I keep getting this warning in Google PageSpeed and now I'm totally out of ideas. I'm using the following code to set the font-family:

@font-face {
    font-family: "Roboto", sans-serif;
    font-display: swap;
    font-weight: 500;
    src: url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap");
}

I also have the rel="preconnect" in my index.html for both Google Fonts related URL.

Why do I get this warning, when the potential saving is zero?

Upvotes: 1

Views: 557

Answers (2)

Marcell
Marcell

Reputation: 111

Turns out one of my packages (@agm/core) caused this issue. After removing it, PageSpeed no longer indicated the problem.

Upvotes: 0

Fabian S.
Fabian S.

Reputation: 2529

The error in the image indicates a missing font-display setting for your font-family. Looking at the code you posted do have one tho.

But the way youre loading the google fonts isnt correct at all and may cause this issue.

What youre doing is importing the whole google fonts css (https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap) into the src attribute of your font-family.

Problem is: If you look at https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap you'll see it already contains all the font families so you should just use it like this

@import https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap

or even import it in your html head directly:

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap">

To make things more clear heres how https://fonts.google.com/specimen/Roboto?query=roboto advises you to import the files:

To embed a font, copy the code into the of your html

a) "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=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">

b) @import

<style> @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap'); </style>

CSS rules to specify families

font-family: 'Roboto', sans-serif;

Upvotes: 1

Related Questions