[Resolved] Delay In Loading Custom Font

[Mary Pearson]

I added it to my wp-config.php but it still is not allowing me to upload, however I am able to upload directly using FTP. So I have uploaded to the uploads folder, changed CSS to

src: url(“https://4.bestwebsites.ca/wp-content/uploads/Breathing-webfont2.woff”) format(“woff”),
src: url(“https://4.bestwebsites.ca/wp-content/uploads/Breathing-webfont2.woff2”) format(“woff2”),

Javascript console is still looking for breathing-webfont.woff:1

[Fernando]

I see this one added through Simple 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-webfont2.woff") format("woff"), src: url("https://4.bestwebsites.ca/wp-content/uploads/Breathing-webfont2.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");
}

And then I also still see this one which has the links that aren’t working. May we know how did you add these?:

@font-face {
    font-family: "Breathing";
    font-display: auto;
    font-fallback: Arial, Seerif;font-weight: 400;
    src: url(https://4.bestwebsites.ca/wp-content/uploads/breathing-webfont.woff2) format('woff2'), 
        url(https://4.bestwebsites.ca/wp-content/uploads/breathing-webfont.woff) format('woff'), 
        url(https://4.bestwebsites.ca/wp-content/uploads/Breathing.ttf) format('TrueType'), 
        url(https://4.bestwebsites.ca/wp-content/uploads/Breathing.eot) format('eot'), 
        url(https://4.bestwebsites.ca/wp-content/uploads/Breathing.otf) format('OpenType');
}

Try to remove this old @font-face rule. This most probably is causing the issue.

Alternatively, you may also try to rename the font-family name of the @font-face rules of the “new” duplicate fonts you’ve added. Ex, change it to something like:

font-family: “breathing-new”;

Then, use this font instead.

Kindly let us know how it goes. 🙂

[Mary Pearson]

Fernando you are amazing! To my knowledge I have only added it to Simple CSS. I use Simple CSS for all added CSS. I can’t imagine where the other version would be, but I do notice a typo of “seerif”. I have checked my child theme and can’t find it. Thought perhaps I might have added it to a stylesheet or something, but I can’t find it. Is there a way to search using “seerif”. If I can possibly find it I would rather do that than work around it.

[David]

The bad @font-face is an inline style in the head of the document:

<style type="text/css">
    @font-face {
        font-family: "Breathing";
        font-display: auto;
        font-fallback: Arial, Seerif;
        font-weight: 400;
        src: url(https://4.bestwebsites.ca/wp-content/uploads/breathing-webfont.woff2) format('woff2'), url(https://4.bestwebsites.ca/wp-content/uploads/breathing-webfont.woff) format('woff'), url(https://4.bestwebsites.ca/wp-content/uploads/Breathing.ttf) format('TrueType'), url(https://4.bestwebsites.ca/wp-content/uploads/Breathing.eot) format('eot'), url(https://4.bestwebsites.ca/wp-content/uploads/Breathing.otf) format('OpenType');
    }
</style>

Which means its been hooked in or enqueued by a function or a plugin. Do you have any GP Hooks or Code Snippets ?

[Mary Pearson]

Thank you David. Can you tell me where I might find it please. Normally I would think it would be in header.php in my child theme but I haven’t added a header.php in my child theme yet, nor is it in the main theme.

[David]

If its a GP hook, you will find it in Appearance > Elements.
If its a function adding it then its in the child theme functions.php or in the Code Snippets plugin.

If none of them appear to being used then it has to be a plugin that is adding that code.

[Mary Pearson]

Found it!!!! I had added a plugin called Custom Fonts. It was there. I have deleted the plugin and all is good.

You have no idea how much I appreciate you all in sticking with me on this. I am so sorry to have been so much trouble, but I am so grateful to each and everyone of you who just kept at with me.

THANK YOU! THANK YOU! THANK YOU!!!!!!!!

This issue is officially resolved!

God bless you!

[David]

You’re very welcome. We’re glad we can be of help!

[Author]

Posts