[resolved] Custom font not working on mobile or tablet (16 posts)

  1. OnPointMC
    Posted 2 years ago #

    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!


  2. Jeff F.
    Posted 2 years ago #

    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

  3. OnPointMC
    Posted 2 years ago #

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

  4. Jeff F.
    Posted 2 years ago #

    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."

    jQuery(function() { jQuery("body").css("font-family", "Oswald"); });

  5. OnPointMC
    Posted 2 years ago #

    Thanks so much Jeffery.

    I'm going to try it right now.


  6. OnPointMC
    Posted 2 years ago #


    Will that change all the "body" text font? I just want to change the text I've coded in the jenna sue font.


    [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>

    "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.


  7. Jeff F.
    Posted 2 years ago #

    You bet, hope it works.

  8. OnPointMC
    Posted 2 years ago #

    Thank you!!!

  9. OnPointMC
    Posted 2 years ago #


    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?


  10. Jeff F.
    Posted 2 years ago #

    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.

  11. OnPointMC
    Posted 2 years ago #

    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!


  12. Jeff F.
    Posted 2 years ago #

    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. :)

  13. OnPointMC
    Posted 2 years ago #


    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.



  14. OnPointMC
    Posted 2 years ago #


  15. Jeff F.
    Posted 2 years ago #

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

  16. dehgel
    Posted 1 year ago #

    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,

Topic Closed

This topic has been closed to new replies.

About this Topic