Solved ttf Module is slowing down the page

That's right approach, such skills are never a waste of time.
If there's anything that you need, I always glad to help. And thank you, Michael, for your words and wishes. I wish you the best too.
Pavel

 

Hi, I´m following that post, thank you so much for the help
I did follow the steps and the results on PageSpeed insights is 95 on mobile and 100 on Desktop "it is amazing"
the only think I´m getting a warning (the lighthouse was not able to verify automatically the value font...modules.woff2) is it normal? wondering if I realy did everything right here.
I´ve place all codes and file (modules.woff2) on child-theme
Thanks in advance

 

Hi.
You're welcome.
If the fonts are displayed normally, then everything is in order. It is likely that the font-display property itself and the loading methods are quite new. As for me, I didn’t get any warnings/errors. But if you’are very worried, you can send the site's link in PM I'll look the other day.
Pavel.

 

Thanks, I´m trying to find a way to PM you but...I´m lost here

 

This is an issue I encounter as well, but do not feel comfortable doing the edits myself.

Wondering:
1) BetweenAI - would you consider doing these edits for me, for a fee?
2) Wondering if this process could be made into a plugin (automate the process)

Thanks in advance!

 

Hey everyone, I'm new here. I found this post because I, too, am looking for a solution to the ttf module which is seriously slowing down all Divi sites... I've become quite handy with even the more technical side of WP/Divi optimisation, however the explanation here is not 100% clear (I'm sure it's just me!).

BetweenAI, the code you provided, does this need to be altered? If so, then how?

You said the first step is to convert ttf to woff2, but I have no idea how to do that... Also, woff2 has very limited browser support. Will it automatically convert to ttf, otf or woff depending on the browser?

I would absolutely LOVE if this process could be made into a lightweight plugin, like Chip mentioned... I would DEFINITELY be willing to pay for that!

Thanks in advance, looking forward to finally fixing this annoying speed-hurting issue.

Kind regards
Senne

 

Hi Senne, I´ll try to help becouse form me its all fresh and I´m still updating my sites...
About the convertion I´ve downloaded the font from Divi/core/admin/fonts/modules.ttf and fontsquirrel/Generator is a good way to convert and download free to all formats

 

Thanks so much for this! I followed your steps exactly, but didn't see any change in Page Insights - is there a delay?
I tried again without converting the ttf to woff2, but kept all of the font-display settings in the three files above, as well add the preloading in the header - still no change. Any ideas?

 

Thank you for this thread - I was able to successfully speed up my page by changing ttf to woff2. However, I am also getting the Warning message in Page Insights.

"Warnings: Lighthouse was unable to automatically check the font-display value for the following URL: https://example.com/wp-content/themes/Divi/core/admin/fonts/modules.woff2."

Does anyone know if there is a fix for this?

Thank you!

 

I do not believe that you can preload ttf fonts. I also tried the same thing before converting to WOFF2

 

Hi Andrew, were you ever able to solve this particular issue?

 

What's the difference of Gonzalez Plugin or Clearfy which is free?

 

I have my "Toggle" icons aren't working correctly. Did i do something wrong?

 

Hi,

To apply your solution on a parent theme it's ok. But modifications will be delete after Divi update.
How to apply them on a child theme ?

Thanks for your help.

 

This looks really promising, but when I tried it with the latest version of Divi (4.5.6) it doesn't seem to work. Is there an updated version, or can anyone provide some screenshots of working:

Divi: core.css (core/admin/css/core.css), Divi: library_menu.css (includes/builder/styles/library_menu.css) and Divi: style.dev.css alterations?

 

I am a bit baffled about the situation. Google Page Insights telling me that not preloading the modules.ttf is slowing down my page by more than 2 seconds.

Adding the preloading modules line into the header.php results still in the 2 second delay analysis, but also now Page Insights tells me that I have a preloading element which is never used / called. Are there any news on the situation since the last post?

 

I am trying to help a friend optimise her site for speed and found this interesting thread. I am surprised you are doing all this yourself. As I understand it you pay for the theme. It is not an open source project. Shouldn't Elegant Themes optimise the theme?

 

Hey I followed BetweenAI tips and did it with FTP transfer. I have a converted my .ttf to woff2 that is just 9KB instead of 90.
I have located all of 3 the directories that you mentioned :
1) Divi: core.css (core/admin/css/core.css),
2) Divi: library_menu.css (includes/builder/styles/library_menu.css)
3) Divi: style.dev.css.

The minified version of this was pasted in all three css mentioned above:

@font-face {
font-display: swap;
font-family: ETmodules;
src: url(core/admin/fonts/modules.eot);
src: url(core/admin/fonts/modules.eot?#iefix)
format("embedded-opentype"), url(core/admin/fonts/modules.woff2)
format("woff2"), url(core/admin/fonts/modules.woff)
format("woff"), url(core/admin/fonts/modules.svg#ETmodules)
format("svg");
font-weight: 400;
font-style: normal
}


Then located header.php and pasted:

<link rel="preload" href="/wp-content/themes/Divi/style.dev.css" as="style">
<link rel="preload" href="/wp-content/themes/Divi/core/admin/fonts/modules.woff2" as="font" type="font/woff2" crossorigin>

But lighthouse still complains about modules.ttf is taking sometimes up to 3 seconds to load on mobile. Any Tips?

Im on DiviVersion: 4.7.3