[Resolved] Delay In Loading Custom Font

[David]

Of course – we’ll be here 🙂

[Mary Pearson]

I am still unable to resolve this. I have re-downloaded and installed new fonts at /uploads and at child-theme, but I still see this error on Console

jquery-migrate.min.js?ver=3.3.2:2 JQMIGRATE: Migrate is installed, version 3.3.2
4.bestwebsites.ca/:1338 GET https://4.bestwebsites.ca/wp-content/uploads/breathing-webfont.woff2 net::ERR_ABORTED 404
xoo-wsc-main.js?ver=2.1:183 updated
4.bestwebsites.ca/:1351 GET https://4.bestwebsites.ca/wp-content/uploads/breathing-webfont.woff 404
4ytprefs.min.js?ver=14.1:2 YT API init check

CSS is
@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”); }

Still looking for suggestions. Thank you.

[Fernando]

Hi Mary,

From my end, I’m also encountering the 404 error regarding your font, Breathing: https://share.getcloudapp.com/7KuQjKRQ

This basically means that the file doesn’t exist in the URL specified.

Can you kindly confirm in Media > Library if the URLs of your woff and woff2 files are the ones you’ve set in your CSS?: https://share.getcloudapp.com/5zuL2z1W

If it’s the same and it’s not working, another factor that could cause the font’s 404 error is that it is not being served by your server. Your server might be denying requests for woff and woff2 files. Kindly reach out to your hosting provider if the may assist you regarding this.

See this for reference: https://hotcakescommerce.zendesk.com/hc/en-us/articles/210926903-HTTP-404-Not-Found-Error-with-woff-or-woff2-Font-Files#:~:text=404%20(Not%20Found)-,Cause,-On%20many%20server

Hope this helps! Kindly let us know how it goes. 🙂

[Mary Pearson]

Thank you Fernando. This is really helpful. Yes I can confirm that the files are there. See screenshot https://ibb.co/41Pqf64

But I will contact my Systems Admin re the possibility of the server being at issue.

Much appreciated!

[Ying]

Hi Mary,

In the screenshot, the URL of the woff2 file is https://4.bestwebsites.ca/wp-content/uploads/breathing.woff2

But in your CSS, the URL is https://4.bestwebsites.ca/wp-content/uploads/breathing-webfont.woff2

They are not matching.

Please make sure all the URL in your CSS is actually link to the correct file 🙂

[Mary Pearson]

Thank you Ying, yes you a quite right. This is the situation. My client has paid for the Commercial “Breathing” font but it can only be active on one site, and right now it is active on her site at https://evolvingwomen.co, so I downloaded the “Personal” font for the time being, but it didn’t include the woff files, so I converted the TTF files to woff with online converter.

I can’t remember but I think this is where the “breathing-webfont” files came from. But since they weren’t working, I tried downloading from another site that included the woff files. I had been changing the CSS accordingly but it still didn’t work. So currently I have uploaded both breathing-webfont.woff and breathing-woff to uploads and also to my child theme, which is where I have put the fonts in the past.

I have changed the CSS to match /uploads/ and /generatepress_child/fonts/, with both “webfont” and without, but it is still not working.

1. Can you tell me which version I should be using, (with webfont or without) and

2. Do I need to have it in my child theme? This is where I used to put fonts but I am thinking now that the CSS is only referring to uploads that this the only place I need it.

[Ying]

Try click on this link: https://4.bestwebsites.ca/wp-content/uploads/breathing-webfont.woff2

The link leads to a 404 page, it means your font’s URL is still not correct.

So first off, make sure your URL is correct.

[Mary Pearson]

I copied and pasted the URLs into my CSS. Please see screenshots
https://ibb.co/znNmNt5
https://ibb.co/g6Yq5W2

[Fernando]

Hi Mary,

I tried manually typing this and it seems to work: https://4.bestwebsites.ca/wp-content/uploads/Breathing-webfont.woff

The @font-face URL links being added to your site for instance is https://4.bestwebsites.ca/wp-content/uploads/breathing-webfont.woff2

On the other hand, this is the actual link: https://4.bestwebsites.ca/wp-content/uploads/Breathing-webfont.woff2

As you can see, it’s case sensitive, and the one’s loading in your site is all in small letter, causing the issue. Can you try clearing any caching mechanisms set in your website?

By default, if you set it to Breathing-webfont, it should not be changed to breathing-webfont when loaded. Basically, it shouldn’t be changing to lower-case letters.

Not sure if there’s a system in your website/server doing this or you entered it in small cases previously, and the @font-face being loaded are still cached. You can probably try to temporarily disable your caching/optimization plugins, and ask your hosting provider to check if there is a caching mechanism set on your website server side as well.

To reiterate, the letter B in you font file’s name is b in the @font-face rule in the front-end(not in the customizer).

If none of these work, you can try to delete the font files you have, rename them to lower case letters, then upload them again.

Hope this clarifies. 🙂

[Mary Pearson]

I deleted all the fonts in uploads and the whole fonts folder in my child theme via FTP and in the Media Library. I uploaded the original “Breathing” files, which were all capitalized, and without webfont, just plain Breathing.woff etc.

I then copied the URLs from the new uploaded fonts to CSS, so I currently have nothing showing webfont.
I cleared my WP-Rocket cache and my browser cache.

When I check the Javascript console I still get the error: Failed to load resource: breathing-webfont.woff:1

See https://ibb.co/YZ91RFD

I do not understand why it is calling for breathing-webfont. At one time I did upload a file called breathing-webfont.woff but not this time.

[Fernando]

To test if this is a caching issue or a different issue, can you try duplicating the files, and renaming them by adding a 2 to their name for instance: breathing-webfont2.woff.

So it would be breathing-webfont2.woff, breathing-webfont2.woff2 so on and so forth. Kindly modify the @font-face rules as well.

Please let us know once you’ve done so, and we’ll check from our end how it goes. 🙂

[Mary Pearson]

I get an error “Sorry you are not allowed to upload this file type”

https://ibb.co/Dk5Qzxq

[Fernando]

To confirm, have you added this?:

https://docs.generatepress.com/article/adding-local-fonts/#uploading-our-font

Hope to hear from you soon. 🙂

[Mary Pearson]

I had read it but since I had no trouble uploading I did not add it, however now with this failure to upload the edited files webfont2, I added it, however I still get the error that I am not allowed to upload.

[Fernando]

I see. Your server may not be allowing this.

You can try adding define('ALLOW_UNFILTERED_UPLOADS', true); to your wp-config.php file. See this for reference: https://kinsta.com/knowledgebase/sorry-this-file-type-is-not-permitted-for-security-reasons/#how

You may also try to reach out to your hosting provider for assistance regarding this.

Hope this helps! 🙂

[Author]

Posts