Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Support request] Custom Font Not Showing on Mobile

Home Forums Support [Support request] Custom Font Not Showing on Mobile

Home Forums Support Custom Font Not Showing on Mobile

  • This topic has 11 replies, 3 voices, and was last updated 3 years ago by Tom.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #552931
    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.

    GeneratePress 2.0.2
    #553097
    Leo
    Staff
    Customer Support

    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 ๐Ÿ™‚

    #554741
    Maria

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

    #554924
    Leo
    Staff
    Customer Support

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

    Thanks!

    #554934
    Maria
    #555186
    Maria

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

    #555340
    Tom
    Lead Developer
    Lead Developer

    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.

    #555348
    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?

    #555818
    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’;
    }

    #555856
    Tom
    Lead Developer
    Lead Developer

    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')

    #555985
    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

    #556187
    Tom
    Lead Developer
    Lead Developer

    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 ๐Ÿ™‚

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.