WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] Custom font not working on mobile or tablet

[Resolved] Custom font not working on mobile or tablet

  • Hi. Any help would be greatly appreciated!

    I am trying to add a custom font to my website, however, it isn’t loading on the following:

    desktop: firefox
    mobile: safari, nor chrome
    tablet: safari, nor chrome

    The font is jenna sue. It is used in one image, so you can see what it look like on the phone and tablet, but the font is part of the image, not text within the code.

    URL: http://www.onpointmc.com

    Thanks so much!

    Lisa

Viewing 15 replies - 1 through 15 (of 15 total)
  • Are you loading the font through the @font-face rule because I don’t see it in the css nor do I see that font uploaded in any folder

    Yes. I uploaded it via and put this code in the custom css code:

    @font-face {
    font-family: jenna_sueregular;
    font-style: normal;
    font-weight: 400;
    src: url(‘http://www.onpointmc.com/wp-content/themes/Avada/jennasue-webfont.eot?#iefix’) format(’embedded-opentype’),
    url(‘http://www.onpointmc.com/wp-content/themes/Avada/jennasue-webfont.woff’) format(‘woff’),
    url(‘http://www.onpointmc.com/wp-content/themes/Avada/jennasue-webfont.ttf’) format(‘truetype’),
    url(‘http://www.onpointmc.com/wp-content/themes/Avada/jennasue-webfont.svg#jenna_sueregular’) format(‘svg’);
    }

    Oh I see, I was looking in the CSS in firebug. I normally load the fonts directly into the root directory.

    But there was a problem a couple of months back with a Google Chrome update that sent a bunch of my sites a flutter until I found this bit of code through the forums. It’s stuck in there in the footer.php right before the <?php wp_footer(); ?> tag and the html and body tags. You would replace “Oswald” with “jenna_sueregular.”

    <script>
    jQuery(function() { jQuery(“body”).css(“font-family”, “Oswald”); });
    </script>

    Thanks so much Jeffery.

    I’m going to try it right now.

    -Lisa

    Jeffery,

    Will that change all the “body” text font? I just want to change the text I’ve coded in the jenna sue font.

    Example:

    [one_third last=”no” class=”” id=””]
    <p style=”text-align: right; font-family: JennaSue; font-size: 48px; color: #a0ce4e; line-height: 65px;”>We like design to be visually powerful, intellectually elegant, and above all timeless.</p>
    <p style=”text-align: right; font-family: raleway; font-size: 12px; color: #d4d1d1; line-height: 18px;”>—Massimo Vignelli</p>
    [/one_third]

    “Raleway” is a google font and is showing up. However, jennasue is a custom font and is only showing up on chrome desktop, and safari desktop. Not on firefox, nor mobile, nor tablet. I haven’t checked on pc explorer yet.

    -Lisa

    You bet, hope it works.

    Thank you!!!

    Jeff,

    Thanks for the code. It did change ALL the body text.

    Unfortunately, I only want to change what I’ve specified, not all the body copy.

    Any idea how to get the font to load without changing ALL the body, just where I’ve coded it, as shown above?

    -Lisa

    Did it work, I didn’t see the other question before I answered. Someone else with more experience might be able to weigh in, I’m just trying to give back a little and wouldn’t call myself expert.

    But it just insures that the font gets loaded. The issue with Chrome was coming up where the fonts wouldn’t “appear” until you hovered over them. I would also consider putting the font in the root of your directory or even a “fonts” folder if you can.

    PS I like your logo.

    Thanks Jeffery. Going to move the font to the root and keep trying.

    I’d give up and use a google font, except I know I need to know how to do this for future projects!

    Thanks!

    If I’m reading this right you’re calling the font as ‘font-family: jenna_sueregular;’
    in your font face rule, but then font-family: JennaSue; in your css. They should match.

    Sorry we’re getting a bit of delay with the response. đŸ™‚

    Jeffery!!!

    YOU ROCK! That was it. I works now on iphone and firefox.

    I used font squirrel to generate the additional font files and didn’t even think of checking the name.

    YEAH!!! THANK YOU SO VERY MUCH!!!

    -LISA

    thanks!!!

    You’re welcome. The other desktop browsers must have been recognizing it since it is a free font.

    Hi Jeff,

    I did the instructions what you provided here to OnPointMC but unfortunately my site did nothing.

    My concern is how to show up “Lucida Calligraphy” on mobile and tablet site version.

    Warm regards,

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘[Resolved] Custom font not working on mobile or tablet’ is closed to new replies.
Skip to toolbar