Fonts: Removing unused font file from my website and preloading font files.

[Jitesh]

In my Weebly website, I use only 3-4 font styles. But when I navigate to

Theme > Edit HTML/ CSS > Assets > Fonts

I see multiple font files (total 30!) with names like: 18839597-afa8-4f0b-9abb-4a30262d0da8.ttf which is not even understandable. If these were understandable then I could have deleted those files which were not in use. But I do not know which font files are in use. 

1. So my first question is since I use only 3-4 font styles, so how to identify those on my editor screen so that I can delete extra redundant font files, which increases my website loading speed.

2. Secondly, since we know adding rel preload ( <link rel="preload" href="font file path and name" as="font" type="font/type" crossorigin>) gives SEO benefit for critical font file loading, so, how and in which file should I add link preload for my font files? Should I add it directly in the head section of my website (Settings > SEO > Header code)?

Need a technical person to help me in this regard. Your help is appreciated.

Thank you.

[Jitesh]

In my Weebly website, I use only 3-4 font styles. But when I navigate to

Theme > Edit HTML/ CSS > Assets > Fonts

I see multiple font files (total 30!) with names like: 18839597-afa8-4f0b-9abb-4a30262d0da8.ttf which is not even understandable. If these were understandable then I could have deleted those files which were not in use. But I do not know which font files are in use. 

1. So my first question is since I use only 3-4 font styles, so how to identify those on my editor screen so that I can delete extra redundant font files, which increases my website loading speed.

2. Secondly, since we know adding rel preload ( <link rel="preload" href="font file path and name" as="font" type="font/type" crossorigin>) gives SEO benefit for critical font file loading, so, how and in which file should I add link preload for my font files? Should I add it directly in the head section of my website (Settings > SEO > Header code)?

Need a technical person to help me in this regard. Your help is appreciated.

Thank you.

[PaulMathews · Accepted solution]

@Jitesh If you remove or change font-family references in your site's css for the fonts you aren't using, they won't be loaded. To do this, go to your site's css in the Code Editor (Site Editor > Edit HTML/CSS) and search for "font-family" (there will obviously be quite a lot of instances of this in the css). Ignore the references to the fonts you are using and remove or change the references to the fonts you aren't using (perhaps set to "inherit"). After you've cleared out all css references to fonts you're not using, those fonts should not load with your site pages.

With regard to item 2, you are correct.

[Adam7]

Thanks for your post, @Jitesh.

1. Some of those fonts may be used for something other than text, e.g. icons and other small graphics. I think you should see a separate font inclusion on your published website for the fonts specifically chosen in Theme > Change Fonts.

2. I don't believe you'll be able to do this unless you customize your theme to use your own font files.

[Jitesh]

Hi @Adam, thanks for your reply.

For the first question, I know which fonts are in use, but on my Weebly editor, I cannot identify it since those fonts are not named properly. I have not added any custom fonts also. So, I want to find out a way to identify those and delete the redundant ones.

For the second question, for preloading the font files, the only requirement is to know the font file path right? So, I have a font file named: 18839597-afa8-4f0b-9abb-4a30262d0da8.ttf under fonts file in weebly editor.

So the preloading code goes like this: <link rel="preload" href="files/theme/assets/18839597-afa8-4f0b-9abb-4a30262d0da8.ttf" as="font" type="font/ttf" crossorigin>

So if I add this code to the header code section from settings of my Weebly website, will it work, or it will work only on my custom font files?