Hello,
I am trying to reduce the amount of request being made to load my website entirely. It looks like Google Fonts is responsible for 24% of the first load time. It is really affecting the load time and I hope you could help me to reduce it.
I still want to use the same default fonts (open sans and roboto) but not from a external source. Can you help me to get there, to use them locally instead?
– To remove the Google fonts request, do I need to remove the lines in the td_config.php file manually? Somewhere else too?
– Do I need to download the Google Fonts and convert them as WOFF? Then upload into ‘Custom Font files’? It that everything I need to do?
– What happens if I delete the Google fonts lines and don’t configurate a custom font. Which fonts
will then be taken over?
– Latest question: Can you tell me which fonts are used in each part of the theme? I see ‘default font’ everywhere (in the modules, header, footer …). Confusing.
Thanks in advance, I appreciate the help.
Kind regards,
John.
Hello John,
The default fonts used in our theme are ‘open sans’ and ‘roboto’ These are defined in code and cannot be removed from the theme settings. In order to remove the google fonts entirely you can follow this topic: https://forum.tagdiv.com/topic/skip-usage-of-external-fonts-load-them-locally/
If you remove these fonts, the theme will default to web fonts such as ‘verdana’.
if you want to load any font locally you need to upload it as a woff by using the custom fonts method also presented in the topic I mentioned above.
I hope this helps.
Thank you!
Thanks for your answer, but I have one more question though:
Can you tell me which font is used by which element? -> with the default fonts from Google.
So I can assign my ‘custom font’ to each or specific elements.
Thanks in advance.
Kind regards.
John
Hello,
Unfortunately I have no list to provide the exact places where each of these 2 fonts is used. You can us the browser inspector if you want to see fonts exactly or you can check style css and search for the fonts and see where it is added. For example. use the chrome inspector and inspect an element, let’s say the main menu: http://screencast.com/t/bRAjAWhnJ you can do this for every element and see the font used.
I hope this helps.
Thanks.
