Question 22611 in SEO Question posted in
Some basic information to get you started with this can be found here.

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

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?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

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


  2. 0

    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;

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search