Inline Google Fonts CSS Does Work

  • georgeslteif

    (@georgeslteif)


    3 years ago

    “Inline Google Fonts CSS” doesnt seem to change anything. Google Speed Insights still complaining about render-blocking css which upon inspection happens to be google fonts.

    Please help!

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)

  • It does work. it effectively looks for the fonts used and inlines them. what it doesn’t do is defer the font, so it can become render-blocking.. a feature I think this plugin needs.

    in your <head> add this
    <link rel=”preconnect” href=”https://fonts.gstatic.com&#8221; crossorigin>
    <link rel=”preload” as=”style” href=”(font CSS URL here)”>
    <link rel=”stylesheet” media=”print” onload=”this.onload=null;this.removeAttribute(‘media’);” href=”(font CSS URL here)”>
    <noscript>
    <link rel=”stylesheet” href=”(font CSS URL here)”>
    </noscript>

    (font CSS URL here) = needs to the full URL of the font style(s). example:
    https://fonts.googleapis.com/css2?family=Poppins:wght@100&family=Roboto:wght@100&display=swap&#8221;

    </head>`

Viewing 1 replies (of 1 total)
  • The topic ‘Inline Google Fonts CSS Does Work’ is closed to new replies.