Webfonts Not Working on Mobile

Support
#1

I have copied some webfonts for the font chunkfive to my webserver into a fonts folder. They display fine online in different browsers but not on mobile. No matter what I do I cannot get them to display properly on mobile. I’ve added my @font-face code into my child theme’s style.css file. I even tried re-entering the code on the actual page as well but can’t seem to get it working properly on mobile. Is there something I missed or maybe haven’t written the code for properly? The fonts could be displaying online because I have them active on my computer too. Just want to get everything setup and working properly before I continue building out the site. I appreciate any help you can give me. Here is my code that is inside the style.css file:

@font-face {
font-family: ‘chunkfive’;
src: url(’/home/jtedlock/public_html/fonts/chunkfive-webfont.eot’);
src: url(’/home/jtedlock/public_html/fonts/chunkfive-webfont.eot?#iefix’) format(‘embedded-opentype’),
url(’/home/jtedlock/public_html/fonts/chunkfive-webfont.woff2’) format(‘woff2’),
url(’/home/jtedlock/public_html/fonts/chunkfive-webfont.woff’) format(‘woff’),
url(’/home/jtedlock/public_html/fonts/chunkfive-webfont.ttf’) format(‘truetype’),
url(’/home/jtedlock/public_html/fonts/chunkfive-webfont.svg#chunkfiveroman’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

My website is avescholarsdev.com and I’m hosting the site with GoDaddy. Let me know if you need my credentials or any more information from me.

#2

Hi there,

Thanks for writing around! The path you’ve provided in the code isn’t correct, please replace your code with the following code in your child theme’s style.css file:

@font-face {
    font-family: 'chunkfive';
    src: url('http://www.avescholarsdev.com/fonts/chunkfive-webfont.eot');
    src: url('http://www.avescholarsdev.com/fonts/chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.avescholarsdev.com/fonts/chunkfive-webfont.woff2') format('woff2'),
         url('http://www.avescholarsdev.com/fonts/chunkfive-webfont.woff') format('woff'),
         url('http://www.avescholarsdev.com/fonts/chunkfive-webfont.ttf') format('truetype'),
         url('http://www.avescholarsdev.com/fonts/chunkfive-webfont.svg#chunkfiveroman') format('svg');
    font-weight: normal;
    font-style: normal;
}

Let us know how this goes!

1 Like
#3

You are awesome! Works perfectly fine on my iphone now. I was wondering if the path or some piece of the code wasn’t correct on my part. Thank you so much!

#4

Glad we could help.

Cheers!

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.