Custom font not working on mobile or tablet

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(‘https://www.onpointmc.com/wp-content/themes/Avada/jennasue-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘https://www.onpointmc.com/wp-content/themes/Avada/jennasue-webfont.woff’) format(‘woff’),
url(‘https://www.onpointmc.com/wp-content/themes/Avada/jennasue-webfont.ttf’) format(‘truetype’),
url(‘https://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,