CSS font-display – how to add?

  • Resolved siutek

    (@siutek)


    2 years, 2 months ago

    Hi, I use Storefront child theme in my store. I noticed that the main font of the theme, Source Sans Pro is loaded from google fonts without the font-display attribute. How can I add this attribute in my child theme?

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

  • Hi @siutek

    The Google Fonts import rule on Storefront can be edited on a child theme by overwriting the following file:

    /wp-content/themes/storefront/inc/class-storefront.php

    Just copy this file from the parent theme to your child theme and add the font-display attribute to Google Fonts URL query string array at line 391:

    $query_args = array(
'family' => implode( '|', $google_fonts ),
'subset' => rawurlencode( 'latin,latin-ext' ),
);

    Like this, for example:

    $query_args = array(
'family' => implode( '|', $google_fonts ),
'subset' => rawurlencode( 'latin,latin-ext' ),
'display' => 'fallback',
);

    You can replace fallback above with whatever font-display value you want to use.

    Hope that helps!

    Thread Starter siutek

    (@siutek)

    thx @hegenberg ??

    Hi @siutek

    Were you able to follow the solution suggested by Berg above?

    We’d love to know if it fixes your issue!

    Cheers!

    Hi there @siutek,

    It seems Berg’s code must have done the trick, as we haven’t heard back from you for a while. With that in mind, I’m going to mark this post as resolved now. If you need any further help here, please let us know. Or, if you need additional help with the Storefront theme, please start a new thread and we’ll be able to help you out there.

    Thank you!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘CSS font-display – how to add?’ is closed to new replies.