Support for the new google fonts CSS API

  • Resolved Sunny Johal

    (@sunny_johal)


    3 years, 7 months ago

    Hi,
    Google has changed the way that it suggests to to embed a font into the <head> of your html (using the new CSS api)

    Expected Behaviour:

    • Autoptimize to inline google fonts (using the new css api url structure) into a single combined request

    Current Behaviour:

    • Autoptimize strips out the themes/plugins enqueued google url from the head of the document.
    • It doesn’t recognise the font families and font weights for stylesheets requests made using the new url structure.
    • It doesn’t include requests for those google fonts in an optimized request

    How to reproduce:

    • Output google fonts as normal in the document head of the theme using the new google fonts css api (e.g. https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&family=STIX+Two+Text:ital@0;1&display=swap)
    • Enable google fonts optimization in the plugin
    • Notice that the stylesheet has been stripped out of the document head and no optimized request is made.

    Thanks ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    When I test with your example Google Font URL when the option is set to “Combine and link in head (fonts load fast but are render-blocking), includes display:swap” I do see the optimized code like this;

    <link rel="stylesheet" id="ao_optimized_gfonts" href="https://fonts.googleapis.com/css?family=Roboto:italic00,300,400%7CSTIX+Two+Text:0,1&display=swap" />

    The mapping might not be 100% correct, but you should see an optimized request. So it _looks_ like something else might be going (wr)on(g) in your case?

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    Any news sunny_johal ?

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    No feedback so I assume this got resolved sunny_johal ? Feel free to follow up if you still encounter issues!

    have a nice day!
    frank

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Support for the new google fonts CSS API’ is closed to new replies.