5

I have a Wordpress site with the "baskerville 2' theme installed. I've been using google page speed insights to assess my site's loading speed. It tells me that the font awesome Webfont preload request is slowing it down. I've added :

<link rel=”preload” href=”https://dsbaudio.com/wp-content/themes/baskerville-2/fontawesome/fontawesome-webfont.woff2?v=4.3.0” as=”font” crossorigin=”anonymous”>

to the header.php and this has improved things a bit.

If I understand things correctly, would the site load a lot faster if the theme didn't preload web fonts at all?

Is there a way to modify the theme (using a child theme edited offline) to revert it to standard fonts like Arial, Times or Georgia?

3 Answers 3

6

Though it is an excellent resource, it is likely that you do not need the entire FontAwesome font file.

I often use maybe 10 of the glyphs available in that file. If you load the entire font – something like 7,000 glyphs – then you are drawing unnecessary system resources to define 6,990 glyphs that you will never use.

The answer:

Subset thy font, good programmer!

To do this, I use a font-subsetting service. They tend to be free, and there are easy-to-follow instructions on their sites. There are several, but you could try fontello: http://fontello.com

I just had a look at a fairly large set of icons that I use on one of my sites, and it was 44KB. Tiny. Fast.

Let me know if you have any questions.

4
  • That sounds like it would do the trick. I'm concerned -for the moment at least - with editing the woff2 font file, so my plan would be to convert it to .tiff, edit out all the fonts I don't need with fontforge, then convert back to woff2 and replace the original file.
    – DSB
    Commented Dec 30, 2019 at 1:47
  • @DSB My opinion is that this would not work as well. It's certainly not the most direct/safest route, as most font sub-setters (including fontello) actually include a sub-setted woff2. I prefer the sub-setting method I detail above, because it 1. is faster and easier (note that I also know my way around tiff files), 2. it respects the quality of work that has been done by the FontAwesome developers, and 3. it is modular and can be readily updated, should you add new glyphs or if the FontAwesome team update glyphs that you use. Even if you are a fontforge master, the next dev may not be.
    – Parapluie
    Commented Dec 31, 2019 at 19:20
  • Yes, you're right - that approach didn't work out too well anyway! I had a look at Fontello - i've loaded up the svg file but i'm a bit clueless as to what i'm supposed to do next... a bit out of my depth really. To be honest, i'm not really happy with the fonts in general within fontawesome, and i certainly don't need all those glyphs! i'd rather have the usual webfonts like arial, etc. It just happens that fontawesome came with the theme that i'm using. I guess i should be looking to customizing the fontface in my css - for me that will require a steep learning curve!
    – DSB
    Commented Jan 2, 2020 at 2:15
  • Any out-of the-box framework or theme will have more overhead than required: it's the nature of the beast. If you can prevent the theme from loading the font and then use your custom css to load the sub-setted font file, then that might be the way to lessen the load on the system. Let me know what you come up with. I will be in airports for the next few days, but can answer any questions after that.
    – Parapluie
    Commented Jan 2, 2020 at 3:45
0

Have you considered placing the code in your footer instead? Some websites claim this increases load times.

Alternatively, with relation to choosing default fonts, yes - either through modifying your CSS, or changing the font within your theme options. You should be able to change it there... I'm not familiar with your theme sorry I could not be more specific.

2
  • thanks - tried adding code to footer, didn't make a whole lot of difference though.
    – DSB
    Commented Dec 30, 2019 at 1:48
  • I knew it wouldn't be the "best" option but it is by far the most common and easiest. Good luck. @parapluie provides a good option too.
    – Aliqua
    Commented Dec 30, 2019 at 3:18
-1

You need to perform two steps process to solve this issue.

Step one: Go to appearance ->theme editor ->framework/dist/css/site/stacks/(yourstacks).css look for @font-face and replace with font-display:swap;

Step two: Go to appearance ->theme editor ->framework->fonts->font_awesome

Insert this line of code inside the font tag font-display=“swap”;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.