WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. OnPointMC
    Member
    Posted 2 weeks 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!

    Lisa

  2. Jeff F.
    Member
    Posted 2 weeks 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
    Member
    Posted 2 weeks 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.
    Member
    Posted 2 weeks 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."

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

  5. OnPointMC
    Member
    Posted 2 weeks ago #

    Thanks so much Jeffery.

    I'm going to try it right now.

    -Lisa

  6. OnPointMC
    Member
    Posted 2 weeks ago #

    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

  7. Jeff F.
    Member
    Posted 2 weeks ago #

    You bet, hope it works.

  8. OnPointMC
    Member
    Posted 2 weeks ago #

    Thank you!!!

  9. OnPointMC
    Member
    Posted 2 weeks ago #

    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

  10. Jeff F.
    Member
    Posted 2 weeks 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
    Member
    Posted 2 weeks 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!

    Thanks!

  12. Jeff F.
    Member
    Posted 2 weeks 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
    Member
    Posted 2 weeks ago #

    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

  14. OnPointMC
    Member
    Posted 2 weeks ago #

    thanks!!!

  15. Jeff F.
    Member
    Posted 2 weeks ago #

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

Reply

You must log in to post.

About this Topic