[Resolved] Embed code in the header

[Christiano]

Yes, I’ve installed it as “best practice”…

I run again the speed test just now and it’s worst than before so something must be wrong. Doctor David, what can I do? 😅

THANKS! 🤗

[David]

Remove what you have done so far ie.

remove the fonts from the uploads directory.
remove the @font-face CSS.

Now, in your Child Theme, use FTP to create a new folder called Fonts and add your .woff and .woff2 fonts in there. Don’t worry about the other versions eg. TTF, EOT, SVG. They are all legacy files for obsolete browsers.

Now make a note of the direct URL to each of those font files they will be something like this.

https://your-domain.it/wp-content/themes/generatepress-child/fonts/the-name-of-the-font.woff

Now re-add your @font-face CSS with just the woff files and the correct URLs, eg.

@font-face {
        font-family: 'Frank Ruhl Libre';
        font-style: normal;
        font-weight: 400;
        src: local(''), 
        url('https://your-domain.it/wp-content/themes/generatepress-child/fonts/the-name-of-the-font.woff2') format('woff2'), /* Super Modern Browsers */
        url('https://your-domain.it/wp-content/themes/generatepress-child/fonts/the-name-of-the-font.woff') format('woff')
}

Repeat that for each of the fonts.

[Christiano]

Hi David, nice to hear from you! 😃

I’ve followed all your suggested steps very closely. I’ve copied and modified accordingly your code directly from your reply. For the Frank Ruhl font all fine. But the Inter one doesn’t works… I’ve tried to regenerate the CSS from the previous url that you gave me but it doesn’t work anyway.

What do you think?

THANKS! 🤗

[David]

Can you check the URL of those fonts ? As those fonts are 404 not found.

[Christiano]

Hi David, I do not know how to check those URLS… 🤭

Anyway, I entered the website with FTP and I checked the paths again and they seems correct. Anyway I copied all the ftp URL in the private infos so you could verify them.

THANKS! 🤗

[David]

Ok, so this is your base URL to the fonts location.

https://staging2.focuscrescita.it/wp-content/themes/generatepress_child/fonts/

Just add the font file name to it. eg. the Inter woff2 would be:

https://staging2.focuscrescita.it/wp-content/themes/generatepress_child/fonts/inter-v12-latin-regular.woff2

[Christiano]

Hi David, I found the issue.

Looking at your pasted URL I noticed that “/public_html/” was missing. Removing that folder from the path solved the issue. 😅

Now, if I enter the four URL font I am able to download the font file.

I tried the speed test again, it is better than before but unfortunately it seems that something is still wrong.

Can you check for me, please?

THANKS! 🙏🏼🤗

[David]

I ran a couple of WebPageTest reports on your site to give you a view of whats going on.

Tested on a US Server ( Virginia )
https://www.webpagetest.org/result/221024_AiDcM8_75D/1/details/#waterfall_view_step1

Tested on a Italy Server ( Milan )
https://www.webpagetest.org/result/221024_BiDcBG_6XK/1/details/#waterfall_view_step1

Notably on both server tests:

1. The first line in the Waterfall report shows the initial request, and download of your sites HTML document. They are ranging between 2 and 3 seconds.
The delay here is significant. It can be improved using Page Caching* on the server. But i would suggest you speak with your host to see if they can improve that.

2. In the waterfall there are several render blocking styles. Noted by the Orange Circle with Cross. Those can also be improved using a Cache / Optimization plugin*

*Note on Caches and Optimizations – these should be done once your have the site ready for deployment. As they can just cause you pain with cached files during development.

[Christiano]

Hi David, as always, thanks for your time and interest! 🙏🏼🤗

I have a plugin that I think could solve all the issue that you’ve pointed out. I have not activated it yet as I would like to do whatever it takes to speed up my website before applying it.

You have not mentioned the font loading so I suppose that all is fine now and that there is nothing else that I could do.

So I closed the ticket and turned the plugin on. 👍🏼

If you don’t mind, just to be sure, I would like you run again your test. ☺️

Anyway, if you will visit Italy in the future, remember that I owe you a nice dinner! It would be nothing compared to your help… 👏🏼👏🏼👏🏼

THANKS! 🙏🏼🤗

[David]

You have not mentioned the font loading so I suppose that all is fine now and that there is nothing else that I could do.

Thats correct.

And testing the site – i see Google is now returning a score of 97 on your Mobile test and 99 on desktop – which is great 🙂

Ill let you know when i am back in Italy again 🙂 i was in Tuscany in September 🙂

[Christiano]

Great! I hope to hear from you soon so! 🤗

[David]

thats great 🙂

[Christiano]

Sorry David, I do not want to bother you again but I just put my staging online and something must be wrong… could you check please?

THANKS! 🤗

[David]

If you run the webpagetest report – the one issue i see is your site trying to load this resource:

https://focuscrescita.it/wp-content/themes/Divi/core/admin/fonts/modules.ttf

Which is a left over preload link on your site:

<link rel="preload" as="font" href="https://focuscrescita.it/wp-content/themes/Divi/core/admin/fonts/modules.ttf" crossorigin="">

Check in the SiteGround optimizer > Font Preloading. If you see that URL in there, then remove it.

[Christiano]

Ah! Divi continues to create hassles! 😂

I removed that URL from the “fonts preloading” so now I suppose that the issue to be solved I think.

Besides that, as I followed Leo’s instructions to put the fonts file on my server, do I need to leave “web font optimization” checked?

THANKS! 🙏🏼🤗

[Author]

Posts