• Resolved natalibarbova

    (@natalibarbova)


    Hi,

    I was checking my page speed score and it tells me i need to preload this font to speed it up. I followed the instructions on hummingbird and added the below to my header:

    <link rel=”preload” href=“/wp-content/fonts/open-sans/mem5YaGs126MiZpBA-UN_r8OUuhvKKSTjw.woff” as=”style”>

    However, the rest of the header code goes red as if there is an error in that line and the page speed report still says i need to preload the font. What am i doing wrong?

    Thanks,

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support Imran – WPMU DEV Support

    (@wpmudev-support9)

    Hello @natalibarbova

    I trust you’re doing well!

    The code rel="preload" needs to be added to the font that is already loading in your header. This will require custom coding.

    As a workaround you may try this plugin that will load Google Fonts local y and also preload these fonts:
    https://wordpress.org/plugins/host-webfonts-local/

    I hope this helps!

    Cheers,
    Nastia

    Thread Starter natalibarbova

    (@natalibarbova)

    Hi,

    I don’t want to clutter my website with plugins if it can be helped. Where can i find the font i need to add rel="preload" ?

    This is all my header shows:

    <?php
    /**
     * The header for our theme
     *
     * This is the template that displays all of the <head> section and everything up until <div id="content">
     *
     * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
     *
     * @package Airi
     */
    
    ?>
    <!doctype html>
    <html <?php language_attributes(); ?>>
    <head>
    		<!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-WBRWV7M');</script>
    <!-- End Google Tag Manager -->
    	<meta charset="<?php bloginfo( 'charset' ); ?>">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
    	<link rel="profile" href="http://gmpg.org/xfn/11">
    	<?php wp_head(); ?>
    	<!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-122820871-1"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
    
      gtag('config', 'UA-122820871-1');
    </script>
    
    </head>
    
    <body <?php body_class(); ?>>
    	<!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WBRWV7M"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    <div id="page" class="site">
    	<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'airi' ); ?></a>
    
    	<?php $menu_layout = airi_menu_layout(); ?>
    	<?php get_template_part( 'template-parts/menus/menu', $menu_layout['type'] ); ?>
    
    	<div id="content" class="site-content">
    
    	<?php
    		if ( !is_page_template( 'page-templates/template_page-builder.php') ) {
    			echo '<div class="container">';
    			echo 	'<div class="row">';
    		}
    	?>
    Plugin Support Imran – WPMU DEV Support

    (@wpmudev-support9)

    Hello @natalibarbova

    I trust you’re doing well!

    The font can be embedded in your header from a plugin. In a oage source of your site the following link is added:
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400%7COpen+Sans:300,400&subset=latin" media="all">

    I see that your site is built with the Elementor plugin, mostly likely it is where the font is loading from. The same issue was opened on the GitHub with only solution is to load the fonts locally:
    https://github.com/elementor/elementor/issues/10886

    Please see here how to replace Google Font from Elementor to be loading locally:
    https://squareinternet.co/hosting-google-fonts-locally-with-elementor/

    I hope this helps!

    Cheers,
    Nastia

    Plugin Support Imran – WPMU DEV Support

    (@wpmudev-support9)

    Hello there @natalibarbova

    I hope you are doing well!

    We haven’t heard back from you for a while now so we’ve marked this ticket as resolved. If you do have any followup questions or require further assistance feel free to reopen it and let us know here.

    Kind regards,
    Nastia

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

The topic ‘Preloading Doesn’t Work’ is closed to new replies.