Docs

[nbrammei]

Hello, I have added a custom font to my Global CSS and to the Custom CSS on a slider (WODs slider). Both of them work great on desktop (Chrome and Safari on Mac) but not on mobile (Chrome or Safari on iPhone – tried clearing caches and reinstalling).

Page affected: http://www.crossfitredux.com/start-here – header on Hero Banner (“Welcome to CrossFit Redux”)

Slider affected: WOD slider above masthead on http://www.crossfitredux.com/wods

Global CSS added (per numerous threads here on adding custom fonts):
@font-face {
font-family: ‘Cyberfall’;
src: url(‘http://www.crossfitredux.com/wp-content/themes/x-child/fonts/cyberfall.eot’);
src: url(‘http://www.crossfitredux.com/wp-content/themes/x-child/fonts/cyberfall.eot?#iefix’) format(’embedded-opentype’),
url(‘http://www.crossfitredux.com/wp-content/themes/x-child/fonts/cyberfall.woff’) format(‘woff’),
url(‘http://www.crossfitredux.com/wp-content/themes/x-child/fonts/cyberfall.ttf’) format(‘truetype’),
url(‘http://www.crossfitredux.com/wp-content/themes/x-child/fonts/cyberfall.svg#cyberfall’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

Custom CSS added on ‘Start-Here’ page:
.responsive-heading {
font-family: Cyberfall, sans-serif;
}

Can you see what I’m doing wrong?

Thank you for your time! Love the Theme.
Nathan

[nbrammei]

This reply has been marked as private.

[Paul R]

Hi,

It looks like you have not uploaded your font files in /wp-content/themes/x-child/fonts/

If you check your font urls, they are all getting 404 which means the font does not exist.

http://www.crossfitredux.com/wp-content/themes/x-child/fonts/cyberfall.eot
http://www.crossfitredux.com/wp-content/themes/x-child/fonts/cyberfall.woff
http://www.crossfitredux.com/wp-content/themes/x-child/fonts/cyberfall.ttf
http://www.crossfitredux.com/wp-content/themes/x-child/fonts/cyberfall.svg

Please upload your font files in /wp-content/themes/x-child/fonts/

Thanks

[nbrammei]

Paul, thank you very much for the reply. It’s weird because I had those files there (at least I think I did!). I’m not positive, but is

http://www.crossfitredux.com/wp-content/themes/x-child/fonts/cyberfall.eot

the same as…

public_html/wp-content/themes/x-child/fonts/cyberfall.eot in my CPanel file manager? (CrossFitRedux.com is the main domain).

At any rate, I did have the files capatilized (Cyberfall.eot, Cyberfall.woff, etc). I changed them to lowercase and now they see to be downloading okay. Are these files case sensitive?

However, the cyberfall.svg (http://www.crossfitredux.com/wp-content/themes/x-child/fonts/cyberfall.svg) is the only one receiving an error.

And the font is still not working on anything smaller than a large screen size. But it IS working on a large screen size. (I thought .ttf was what the mobile phones use? And that file is downloading okay when clicking on it: http://www.crossfitredux.com/wp-content/themes/x-child/fonts/cyberfall.ttf).

I’ve attached a screenshot of my file manager fonts folder containing the four files as well as the error I get from the .svg file.

I’m sure it’s something I’m doing (or not doing), just not sure what that is.

Any help would be greatly appreciated. Thank you!

[nbrammei]

This reply has been marked as private.

[nbrammei]

Well, we’re getting closer. I got it working on Chrome and Safari on my iPhone and Tablet. Also Safari on my laptop.

However, it’s NOT working with Chrome or Firefox on my laptop (but it does work on Safari on my laptop). I tried closing, clearing caches, restarting, etc. So any help you could give me with this would be appreciated!

Here’s what I did: I ditched the old files as it looked like the .svg was corrupt in some way. I had generated them from font2web.com.

So I went to fontsquirrel.com and generated them there. And I used their stylesheet. So this is what I have now on my Global CSS (and on my style.css file (not sure if that matters as long as it’s on the global CSS?))

So now I’ve got this on my Global CSS and my WODs Slider:

@font-face {
    font-family: 'cyberfallregular';

    src: url('http://www.crossfitredux.com/wp-content/themes/x-child/fonts/cyberfall-webfont.eot');

    src: url('http://www.crossfitredux.com/wp-content/themes/x-child/fonts/cyberfall-webfont.eot?#iefix') format('embedded-opentype'),

         url('http://www.crossfitredux.com/wp-content/themes/x-child/fonts/cyberfall-webfont.woff2') format('woff2'),

         url('http://www.crossfitredux.com/wp-content/themes/x-child/fonts/cyberfall-webfont.woff') format('woff'),

         url('http://www.crossfitredux.com/wp-content/themes/x-child/fonts/cyberfall-webfont.ttf') format('truetype'),

         url('http://www.crossfitredux.com/wp-content/themes/x-child/fonts/cyberfall-webfont.svg#cyberfallregular') format('svg');

    font-weight: normal;
    font-style: normal;

}

(How can I put all that css in a frame to make it easier for you all to see – I’ve seen it done before here on the forum?)

and this in my Custom CSS at http://www.crossfitredux.com/start-here:

.responsive-heading {
  font-family: cyberfallregular, sans-serif;
}

To summarize (these are for both the “Start Here” page and the WODs Slider):
It works on iPhone with Safari and Chrome.
It works on a tablet with Safari.
It works on a laptop with Safari.
It DOESN’T work on a laptop with Chrome or FireFox (I’ve got the latest version of both).

The attached screenshot from my laptop shows Safari working (upper left), Firefox not working (upper right), and Chrome not working (bottom).

Thank you!
Nathan

[Friech]

Hi Nathan,

The site is having a Cross-Origin Resource Sharing policy issue. You declared your font file path with www prefix, but your actual domain does not have any: http://crossfitredux.com/start-here/

Read more about custom font here.

Regarding of code in the frame, place a Grave accent ( ` ) character in the beginning and ending of your code. Or highlight your code and click the code tool.

Hope this helps, Cheers!

[nbrammei]

I continue to be amazed by the help that all of you can provide. No joke. You guys are incredible. Who, in the world, would have noticed a Cross-Origin Resource Sharing policy issue?!?! Ridiculous.

Thank you all – we’re lucky to be able to learn from you.

Testing out the code. Fun stuff. Thank you!! :)

[Rue Nel]

Hey There,

You’re welcome! We are just glad we were able to help you out.
Thanks for letting us know that it has worked for you.

Cheers.

[Author]

Posts