New Google Fonts URL incompatible with wp_enqueue_style()

  • Resolved Jonathon Leathers

    (@jtleathers)


    4 years, 6 months ago

    The new Google Fonts changed how the generated URL to import the CSS font file on a site.

    Old Google font format
    https://fonts.googleapis.com/css?family=Open+Sans:400,700|PT+Serif:400,700&display=swap

    New Google font format
    https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=PT+Serif:wght@400;700&display=swap

    The new format uses the ‘family’ parameter name twice in the query string and wp_enqueue_style() will only recognize the last one.

    So running the following code will only actually add the PT Serif font and weights:
    wp_enqueue_style( 'twd-googlefonts', 'https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=PT+Serif:wght@400;700&display=swap' );

    I’m mainly curious why WordPress is ignoring or stripping the previous parameter if the names are the same and if there is any way to prevent WordPress from doing that so it is compatible with adding Google fonts via the URL.

Viewing 4 replies - 1 through 4 (of 4 total)

  • I think you need to write up a ticket for this. (search first)
    https://core.trac.www.ads-software.com/

    Moderator Samuel Wood (Otto)

    (@otto42)

    www.ads-software.com Admin

    The problem is the multiple families are seen as incorrect in a normal URL when it’s trying to add the version parameter.

    To eliminate the problem, eliminate the version parameter. Like so:

    wp_enqueue_style( 'twd-googlefonts', 'https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=PT+Serif:wght@400;700&display=swap', array(), null );

    The empty array is the dependencies (empty is the default), the null version prevents a version from being added, and so prevents the code from adjusting the query parameters.

    Thread Starter Jonathon Leathers

    (@jtleathers)

    Thank you both for the suggestions!

    There is already a Trac ticket about this and I’ve referenced the solution offered here.

    The code shared above, setting the version parameter to null, was the solution for me.

    Thanks you so much, @jtleathers and @otto42, I had been loosing my mind over this. Thanks.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘New Google Fonts URL incompatible with wp_enqueue_style()’ is closed to new replies.