[Support request] Custom Font Not Showing on Mobile

[Maria]

I enabled a new live link for you.

The site is on my local server. I’ve enabled the live link. Another thing I’ve noticed is that I’m getting FOUT for the custom fonts on desktop. On the Homepage, see the words “because, live, laugh, and cancer” which are styled in the custom font as well as the word “Joyfully” on the blog sidebar.

My custom font works fine on desktop but doesn’t display on iOS or Android. This is my CSS:
@font-face {
font-family: ‘Think-Pink-Regular’;
src: url(‘Think-Pink-Regular.eot’); /* IE9 Compat Modes */
src: url(‘Think-Pink-Regular.eot?#iefix’) format(’embedded-opentype’),/* IE6-IE8 */
url(‘Think-Pink-Regular.woff2’) format(‘woff2’), /* Super Modern Browsers */
url(‘Think-Pink-Regular.woff’) format(‘woff’), /* Pretty Modern Browsers */
url(‘Think-Pink-Regular.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘Think-Pink-Regular.svg#Think-Pink-Regular’) format(‘svg’);/*Legacy iOS */
}

Any help would be greatly appreciated.

[Leo]

Hi there,

Can you link me to the site in question?

You can edit the original topic and use the private URL field.

Let me know 🙂

[Maria]

Any ideas on why the custom font isn’t showing on mobile or what to do about the FOUT on desktop?

[Leo]

Can you link us to the site in question so we can have a look?

Thanks!

[Maria]

http://0b11bea1.ngrok.io/

[Maria]

The tunnel just expired. Here’s a new link: http://e2a024a7.ngrok.io/
Hoping you can have a look soon.

[Tom]

Sorry we didn’t get to this faster – the link has expired again.

In your @font-face, are you using the full URL to the font files, or do you have it as the filename only? It should use the full URL.

Is the CSS being moved to the footer? That would cause FOUT. Caching/minifying plugins sometimes do that.

[Maria]

I’m using the CSS listed in your docs. Here’s the link: http://e2a024a7.ngrok.io/
I’m not using any caching or minifying plugins on this dev site. How can I tell if CSS is being moved to footer?

[Maria]

Tom,
I’m testing the font on a live server to make it easier to see. https://presser.demo.site/custom-font/

This is my CSS:
@font-face {
font-family: ‘Think-Pink-Regular’;
src: url(‘Think-Pink-Regular.eot’); /* IE9 Compat Modes */
src: url(‘Think-Pink-Regular.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(‘Think-Pink-Regular.woff2’) format(‘woff2’), /* Super Modern Browsers */
url(‘Think-Pink-Regular.woff’) format(‘woff’), /* Pretty Modern Browsers */
url(‘Think-Pink-Regular.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘Think-Pink-Regular.svg#Think-Pink-Regular’) format(‘svg’); /* Legacy iOS */
}

.custom-font {
font-family: ‘Think-Pink-Regular’;
}

[Tom]

Can you try adding the entire URL to the @font-face block?

So instead of: url('Think-Pink-Regular.eot')

Do this: url('https://yoursite.com/url/to/Think-Pink-Regular.eot')

[Maria]

Didn’t work. Here’s what I tried: src: url(‘https://presser.demo.site/site/wp-content/themes/generatepress_child/fonts/Think-Pink-Regular.eot’); /* IE9 Compat Modes */

I’m at a loss, don’t know what to do.

By the way, did you know you were mentioned in Kinsta’s Newsletter for Theme of the Week? Here it is: https://mailchi.mp/kinsta/disk-space-hosting?e=3b246546d2

[Tom]

If you type that URL into your browser, it shows a 404 error, which means the URL is wrong: https://presser.demo.site/site/wp-content/themes/generatepress_child/fonts/Think-Pink-Regular.eot

Can you confirm the URLs are correct?

I did! Really awesome of them 🙂

[Author]

Posts