[Resolved] Delay In Loading Custom Font

[Mary Pearson]

I am rebuilding a website for a friend at https://4.bestwebsites.ca/. The font she is choosing to use for Headings is “Breathing”. It is NOT a google font. The font loads first with a default font, and then it switches to “Breathing”. There is a delay in loading and then in switching. Can you please tell me what I’m doing wrong.

I believe that I have added the font versions correctly as per your documentation, with the following CSS:

@font-face {
	font-family: "Breathing";
	font-style: normal;
    font-weight: 400;
	src: url("https://4.bestwebsites.ca/wp-content/uploads/Breathing.ttf") format("ttf");
	src: url("https://4.bestwebsites.ca/wp-content/uploads/breathing-webfont.woff") format("woff"),
	src: url("https://4.bestwebsites.ca/wp-content/uploads/breathing-webfont.woff2") format("woff2"),
	src: url("https://4.bestwebsites.ca/wp-content/uploads/Breathing.otf") format("otf");
	src: url("https://4.bestwebsites.ca/wp-content/uploads/Breathing.eot") format("eot");  }

I did find reference to adding a filter in functions.php but it was for google fonts, so I didn’t add it.

What else do I need to do to prevent this delay in loading?

Thank you.

[Fernando]

Hi Mary,

Upon testing your website, I found that one major factor which may contribute to the delay in the loading time of your font is the fact the your website is still using HTTP/1.

For reference: “HTTP2 is much faster and more reliable than HTTP1. HTTP1 loads a single request for every TCP connection, while HTTP2 avoids network delay by using multiplexing.

HTTP is a network delay sensitive protocol in the sense that if there is less network delay, then the page loads faster.”

Source: https://cheapsslsecurity.com/p/http2-vs-http1/#:~:text=HTTP/1.x%20vs%20HTTP/2%3A%20A%20Comparative%20Study

With that said, it may be good to reach out to your hosting provider and see if they may assist you regarding this.

Hope this helps! 🙂

[Mary Pearson]

Many thanks Fernando. This is excellent information. I will definitely look into it.

[Fernando]

You’re welcome Mary! Glad to be of assistance! Feel free to reach out anytime you’ll need assistance with anything else. 🙂

[Mary Pearson]

My Systems Administrator has updated my server so that all websites are using HTTP2 protocol. It has not made a bit of difference to resolving my original problem of the font loading correctly on my website at https://4.bestwebsites.ca/

The font loads first with a default font, and then it switches to “Breathing”. There is a delay in loading, and then in switching.

Do you have any other suggestions that I might try?

Thank you.

[David]

Hi Mary,

in your @font-face CSS can you check the URLs for the .woff and .woff2 files? As they are both 404ing.

[Mary Pearson]

Thank you David. Indeed the .woff and .woff2 files were showing as .woff-webfont and .woff-webfot. I have corrected this error and cleared cache, but the problem still exists.

Any other ideas?

[David]

Not sure if its a network cache but i still see the woff fonts are 404ing.
So its still resorting to the .ttf ( which is a big file – around 280kb zipped – which is part of the delay in it being displayed )

[Mary Pearson]

Thank you David. Indeed I had only cleared my website cache, not my browser cache. Apologies. There is still a delay in loading the font on each page, but it no longer loads the default font, so this is a huge improvement and I can live with it, but if you have any other ideas to speed up the loading, please let me know. Otherwise I will close this ticket.

Thank you again!

[David]

Sorry – i am still seeing 404s on the font.
What URL have you added for them in your @font-face ?

[Mary Pearson]

Sorry for the delay in responding. Our power keeps going off and I lose internet. After reading your last response I changed my URLs to:

src: url(“https://4.bestwebsites.ca/wp-content/themes/generatepress_child/fonts/Breathing.ttf”) format(“ttf”);
src: url(“https://4.bestwebsites.ca/wp-content/themes/generatepress_child/fonts/breathing.woff”) format(“woff”),
src: url(“https://4.bestwebsites.ca/wp-content/themes/generatepress_child/fonts/breathing.woff2”) format(“woff2”),
src: url(“https://4.bestwebsites.ca/wp-content/themes/generatepress_child/fonts/Breathing.otf”) format(“otf”);
src: url(“https://4.bestwebsites.ca/wp-content/themes/generatepress_child/fonts/Breathing.eot”) format(“eot”); }

Originally they were in /wp-content/uploads/breathing.woff etc.

Still no change – delay in loading.

[David]

Yeah those .woff files are not loading. If i go to this one for example:

https://4.bestwebsites.ca/wp-content/themes/generatepress_child/fonts/breathing.woff

it returns a 404.

[Mary Pearson]

Thank you. I’ll download the font files again and see if that helps.

[David]

Let us know how you get on!

[Mary Pearson]

Many thanks! Will leave the ticket open until I have tried it if that’s OK.

[Author]

Posts