How can I preload fonts on wordpress?

html wordpress pagespeed preload lighthouse
Nathan Bernard picture Nathan Bernard · Mar 28, 2019 · Viewed 10.2k times · Source

Running Pagespeed on a wordpress i'm working on it says 4.5sec are taken by this resource: /wp-content/themes/dt-the7/fonts/icomoon-the7-microwidgets-16x16/fonts/icomoon-the7-microwidgets-16x16.ttf?dqeoeo

and it suggests to use preload for it.

So I tried to add this to the header-single.php in wordpress before </head>:

<link rel="preload" href="/wp-content/themes/dt-the7/fonts/icomoon-the7-microwidgets-16x16/fonts/icomoon-the7-microwidgets-16x16.ttf?dqeoeo" as="font" type="font/ttf" crossorigin="anonymous">

but without any result. Does someone know how I can preload such content on a wordpress?

Answer

monirakandha picture monirakandha · Dec 31, 2020

I face same problem when trying to improve speed for mobile.Try that way but that is not working for me. then writte code for preload. this is work for me. First go to function.php in your theme...Note Must create your theme child.

add_action('wp_head' , function(){
    echo'
    <link rel="preload" herf="font Url" 
    as="font" type="font/woff2" crossorgin>
    <link rel="preload" herf=" font Url" 
    as="font" type="font/woff2" crossorgin>
    ';
});

Related questions

Best place to insert the Google Analytics code

Where’s the best place to insert the Google Analytics code in WordPress, header or footer? I prefer footer, because I wanted my site to load faster by reducing the number of scripts in the header, but can it work …

Read More
wordpress contactform7 textarea cols and rows change in smaller screens

I used contactform7 to create the contact form for a wordpress site. I want to reduce the rows in a textarea on that form for smaller screen sizes. Is there any method I can use using contactform7's own syntax? …

Read More
error int the Failed to set referrer policy

I'm getting the following error in my chrome console for a Wordpress site I'm working on. Failed to set referrer policy: The value 'http://example.com/comic/' is not one of 'always', 'default', 'never', 'no-referrer', 'no-referrer-when-downgrade', 'origin', 'origin-when-crossorigin', or …

Read More