Docs

[crucialtim]

Hi,
Anyone aware of a suitable workaround in X for using a @font-face font and avoiding the delay in load time of the font that happens on page load? I’m seeing a blank white space for 3 seconds (or longer), and then the font renders. Screenshots attached.

[crucialtim]

This reply has been marked as private.

[Friech]

Hi There,

Thanks for writing in! What font are you using? It seems it is not loading on my end, please confirm.

http://image.prntscr.com/image/51f4b627fea14c6c97c42aec033229b3.png

And did you include all the font variant? Keep an eye on the load time, Google fonts can be heavy sometimes.

Thanks.

[crucialtim]

Hi Friech,
It’s not a Google Font, I’m using a @font-face kit to pull in a font called Jenna Sue.

Ok, this must be part of the problem…I’m seeing it on my site, but I have it installed locally, so that must be why it’s showing up. I have the @font-face code right at the top of my custom css file, but just noticed that I’m getting not found errors. I followed instructions I found somewhere else on the forum for the path to those files, but guess I didn’t get it quite right.

http://www.zenwh.com/wp-content/themes/x-child-3/fonts/JennaSue.ttf

Here’s what I’m looking at in my FTP (attached)

[crucialtim]

Got the path fixed…and it appears as though it’s now working. Are you seeing the font come up now, and with no delay?

[Joao]

Hi There,

Your website seems fine, let us know if you need further help with this issue or any other.

Thanks

Joao

[Paul R]

Hi,

It doesn’t seem to work on my end.

Please refer to the link below.

https://community.theme.co/forums/topic/how-do-i-change-font-in-theme-x/#post-248442

Thanks

[crucialtim]

Hi Paul,
That post is actually how I got to where I am with this – saw it last night (thank you).

There appears to be an issue with the font showing up in certain browsers. My partner is using Chrome on Windows 10, for example, and doesn’t see the font (he sees a serif font as a fallback).

I may just specify the font I’m using elsewhere for headings as the fallback, so if the handwritten one doesn’t work, I can at least count on the fallback looking ok.

[Rad]

Hi there,

Yes, when the first one won’t load the fallback will then picked up. I checked in Windows 10 and there is no font applied to the text compared to your screenshot. How did you added it? Or have you removed it already?

Thanks!

[crucialtim]

It’s the first 6 lines of my custom css file, added via appearance/custom/custom css:

/* @font-face kit by Fonts2u (http://www.fonts2u.com) */ @font-face {
font-family: “Jenna Sue”;
src: url(“http://www.zenwh.com/wp-content/themes/x-child-3/fonts/Jenna_Sue/JennaSue.eot?”) format(“eot”), url(“http://www.zenwh.com/wp-content/themes/x-child-3/fonts/Jenna_Sue/JennaSue.woff”) format(“woff”), url(“http://www.zenwh.com/wp-content/themes/x-child-3/fonts/Jenna_Sue/JennaSue.ttf”) format(“truetype”), url(“http://www.zenwh.com/wp-content/themes/x-child-3/fonts/Jenna_Sue/JennaSue.svg#JennaSue”) format(“svg”);
font-weight: normal;
font-style: normal;
}

[Christopher]

Hi there,

Please assign this font family to elements.

e.g :

h1,.h1{

    font-family: "Jenna Sue";
}

Hope it helps.

[crucialtim]

Hi,
I’m doing that already, via Cornerstone. Do I need to do it via the custom stylesheet? Screenshot attached.

[Rad]

Hi there,

Would you mind providing a screenshot where you added this

@font-face {
font-family: "Jenna Sue";
src: url("http://www.zenwh.com/wp-content/themes/x-child-3/fonts/Jenna_Sue/JennaSue.eot?") format("eot"), url("http://www.zenwh.com/wp-content/themes/x-child-3/fonts/Jenna_Sue/JennaSue.woff") format("woff"), url("http://www.zenwh.com/wp-content/themes/x-child-3/fonts/Jenna_Sue/JennaSue.ttf") format("truetype"), url("http://www.zenwh.com/wp-content/themes/x-child-3/fonts/Jenna_Sue/JennaSue.svg#JennaSue") format("svg");
font-weight: normal;
font-style: normal;
}

I don’t see it from customizer’s custom CSS, cornerstone CSS, or even on child theme’s style.css. Would you mind providing a guide on how you’re doing it?

Thanks!

[crucialtim]

Well, that’s weird. My custom css disappeared. It’s back now. First 5 lines of css added in customizer/custom css

[Lely]

Hi There,

I can see that the CSS was added correctly. But then I found the following error on the console:
Font from origin 'http://www.zenwh.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://zenwh.com' is therefore not allowed access.

Please check this link for some guide on the issue:https://wordpress.org/support/topic/css-fonts-missing-no-access-control-allow-origin-header

Hope this helps.

[Author]

Posts