Setting font to swap

  • This topic has 2 replies, 2 voices, and was last updated 1 week ago by Christine Ros.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #984086
    Christine Ros
    Participant

    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 ?

    #985313
    J. Davis
    Keymaster

    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

    #985493
    Christine Ros
    Participant

    Hello,

    Thank you, I will try this.

    Regards

    Christine

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.