Setting font to swap

[Christine Ros]

Hello,

Checking performance site make appears page is not using font-display rule when loading the following web fonts.

To fix that, I have to add the font-display property for Google Fonts, to pass the desired value in the query string display parameter like
https://fonts.googleapis.com/css?display=swap&family=Roboto&display=swap

Also it is mentioned for fonts hosted locally, add the font-display property to the @font-face CSS rule but I don’t find @font-face

I look into style.css file, into editor-style.css and functions.php but I am not a coder so I dont know the good process to modify.

Is it enough to ad din all “baloo cheethan”, “hind” and “releases” fonts found in style.css file?

font-display: swap;

– There is that in functions.php line 97

add_editor_style(array(‘css/editor-style.css’, petotel_fonts_url()));

– and line 173 – 175

wp_enqueue_style( ‘petotel-fonts’, petotel_fonts_url(), array(), null);

wp_enqueue_style( ‘font-awesome’, ‘//use.fontawesome.com/releases/v5.8.1/css/all.css’, array(), ‘5.8.1’);

– and line 270 -> 282

if ( ! function_exists( ‘petotel_fonts_url’ ) ) :
/**
* Register Google fonts for Petotel.
*
* Create your own petotel_fonts_url() function to override in a child theme.
*
* @since petotel 1.0.0
*
* @return string Google fonts URL for the theme.
*/
function petotel_fonts_url() {
$fonts_url = ”;
$font_families = array();

I feel it is in these 270/282 lines but really don’t know what to do.

Can you help please ?

[J. Davis]

Hi Christine,
You may try to add the style like this:

*{
font-display: swap;
}

Or you may enqueue a font via Child Theme with all required parameters and then override the default font with your custom font within CSS.

best regards,
J. Davis

[Christine Ros]

Hello,

Thank you, I will try this.

Regards

Christine

[Author]

Posts