Hi there,
I’m building a site at:
The fonts work great on the desktop, however, when viewing from mobile on safari / chrome - the body font changes.
I tried using font manager, and custom css, but the font in question is a webfont - arial narrow.
Why can’t I make it appear on mobile?
In chrome it looks fine, in safari certain characters are bolded: ÁÉŐ etc.
Any way to fix this too?
Hi Pbalazs89,
I’ve checked your website and here you are my first suggestions:
p,
body {
font-family: "Arial Narrow";
font-weight: 100;
font-style: normal !;
}
The font style property value isn’t correct, please edit it to be like font-style: normal;.
$('.tg-media-button').removeAttr('data-tolb-src');
This is also -unfortunately- not correct, please replace the $ with jQuery.
Also, it’s worth to run your custom CSS code over one of the CSS validation tools, like this one and correct any error you might get.
Let me know how it goes,
Thanks.
Hi, I performed the suggested changes, but unfortunately this did not fix the issues that are plaguing the experience on Firefox and Safari.
Example: https://www.dropbox.com/s/qtl7uxk1p84ce7d/Screenshot%202018-05-08%2008.24.59.png?dl=0
Any other ideas?
Problematic fonts (either on Firefox or on Safari)
Arial Narrow
Lithos Pro
Hi There,
Thanks for the confirmation!
I can see Arial Narrow is working fine in desktop safari but not in Mobile Safari.
To help you find out the issue we need your login details. Please send us following.
Please provide following information:
Set it as Secure Note
Thanks
Hi there,
Secure note added to last reply.
Thanks for the help. Btw, on Firefox the essential grid part appears messed up as well when on arial narrow. Now it’s fine with open sans, but if I set it with anything else, the special characters such as őúűéáüöó appear messed up, even though they are part of the font set.
Thanks again.
Hi @Pbalazs89,
Arial Narrow is a system font, which means a font pre-installed in user’s system (user’s device). It’s common in desktop as a system’s font, but it’s not available in IOS. It works okay with Lato since it’s a google hosted font, and the browser will download that font to user’s device as a cached font.
Please use another font supported by your device, or just use Google or Typekit fonts.
Thanks!
Hi there,
Here’s the thing, I have changed the font to one that I have uploaded to my site. In the CSS it is added in numerous versions. It shows up fine even on safari on mobile, all but with one exception. Essential Grid - Mobile. Why? This seems like a bug to me, otherwise it would not show up in text elements either. Idea? Thanks!
Hi there,
It sounds like a custom font? How did you do it in EG? It’s independent on theme’s font since it has it’s own font system like Revolution Slider. I just wonder how you did it.
Please provide information about the issue and how to reproduce it.
Thanks!
Hi there,
I added the custom font to global css:
@font-face {
font-family: 'TwCenMt';
src: url('http://padthai.decorolux.com/wp-content/fonts/TwCenMT-Regular.eot');
src: url('http://padthai.decorolux.com/wp-content/fonts/TwCenMT-Regular.woff') format('woff'), url('http://padthai.decorolux.com/wp-content/fonts/TwCenMT-Regular.ttf') format('truetype'), url('http://padthai.decorolux.com/wp-content/fonts/TwCenMT-Regular.svg') format('svg');
url('http://padthai.decorolux.com/wp-content/fonts/LithosPro-Regular.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
Then went into EG skin editor:
And boom.
Thanks for the help!
Hey @Pbalazs89,
Essential Grid uses your custom font. So the issue might be related to Essential Grid’s font properties which does not play well with your custom font and Safari.
There are 2 possible causes that I see.
Your TrueType font is missing. This URL http://padthai.decorolux.com/wp-content/fonts/TwCenMT-Regular.ttf returns a 404 and I’m not sure if Safari needs that.
I compared the setup of your body font family which also uses your custom font and the Essential Grid setup and I found 1 obvious difference and that is the -webkit-font-smoothing is set to auto (Chrome browser default) for the body font and Essential Grid uses antialiased
Try adding this to your Global CSS
.esg-grid * {
-webkit-font-smoothing: auto !important;
font-smoothing: auto !important;
}
If this still does not help, we will need to post this to our issue tracker for further investigation.
Thanks.
Okay, so I added the code, and it made it look a bit better on safari, but no change in Firefox. I also fixed the permissions for the ttf file, so that was not causing it either.
Could you have a look into it?
Thanks!
*** Also, I realized that I am having the same issue with another font on the website, but not related to EG:
And here’s the weird part, I’m using the same font on the home page in the recent posts section, and special caharacters such as éáőú etc. show up fine here… here’s the screenshot:
You can see in the right column.
I’m at my rope’s end as to what is causing this 
Hi there,
Fonts in the grid are the same on both of my safari and firefox, would you mind providing both your view in safari and firefox, side by side?
As for Mammut page, it appears that the font files aren’t loaded. I checked it with Firefox developer network console and I can’t find any requests for WOFF files.
Could you try moving all your @font-face related CSS to your child theme’s style.css? You must add it before other CSS begins.
Thanks!
Here’s the screenshot: https://www.dropbox.com/s/d42a01b74d5ezoy/Screenshot%202018-05-14%2010.44.01.png?dl=0
This is a big deal in the second column, however the first column is weird too in safari, it seems like it is using a different font. I will try the other fixes you have suggested until then.
Added the fonts to my child css, the result:
Any ideas? :S
Also, I noticed, that while my fonts work on my ipad mini, on iphone they have reverted to some base fonts.
Attached an image.
Hi there,
I found weird font styling,
.x-text > span {
font-family: !'Lithos Pro' importan';
}
When I turn it off, it shows the proper ÁÉŐ, but the font falls back to Times Roman because the “TwCenMt” isn’t loading in Firefox and IOS Safari. Perhaps it’s font file issues? Have you tried Google Fonts instead?
For the meantime, please also try fixing the above CSS and it looks like applied directly to the text element.
Thanks!
Hi Rad,
I did this fix that you recommended. No changes unfortunately though.
I’m sure these things would not be an issue if I used Google Fonts, but this client of mine wants these branded fonts as they use them extensively in their marketing efforts.
My issue is that I don’t quite understand what is causing it. I added basically all the font files that are available. They all have 644 permissions. They are referenced to https. They work in one place and don’t work in another, it makes no sense at all. For example, the fonts load on an ipad mini, but don’t on an iphone 6 plus.
How can this be a font issue if the fonts work on one page but don’t in another?
Thanks for looking into it.
Hi @Pbalazs89,
Your description shows that there is a problem with the font itself and some extensions of the fonts are not loaded correctly on those devices. Please consider that the custom font is a tricky business and different browsers support different font types and it is important that all font types be available.
Please consider that it is not a theme related thing. You can test that by changing the theme to for example the default WordPress theme and you will see the same problem.
You need to check the font that you are using as that should be the main source of the problem.
Thank you for your understanding.
Hey Guys, I appreciate the time you take to answer these questions.
It may not be a theme issue, but something is stopping these browsers from reading these fonts.
Why I believe that it is not totally separated? Because I use these fonts elsewhere with no issue.
Check it out: http://pttraining.decorolux.com/ They are referencing the same files and it works on mobile.
Check it out here as well: http://www.padthai.decorolux.com/Calorie/
Also referencing the same files and it works without an issue.
** EDIT:
I managed to fix Lithos Pro to display on mobile’s by moving back the css from child-theme/style.css to theme options css, which is weird by itself. Thought I’d let you know.
I checked my css with validators they gave no errors either.
Hey @Pbalazs89,
Since our suggestions did not work, this issue will need further investigation. I’ve said that previously.
The code I gave along with my previous response does not include Firefox. Try the suggestion in this article.
Rad’s code had a syntax error maybe that is why it didn’t work.
As @christopher.amirian said, using custom font is tricky. We tried to help here. Went above and beyond even the use of custom fonts should be the user’s responsibility along with fixing issues. If you have a tight deadline, it would be best that you hire a third party developer you could work closely for this issue.
You could also try setting up different test sites like in http://poopy.life/ to see if this is something related to database or WordPress (including theme and plugins) setup. If you have evidence that the issue is caused by Pro, tell us how we can replicate it. If you’re using a paid font, you might need to attach a zip file of the font files and we’ll post this to our issue tracker once we have replicated in our test sites.
Thank you for understanding.
Hi there,
I really appreciate all the help you guys give here. Hell, you guys partially taught me to do all the stuff I do. I’m really grateful for that and I’m not displeased at all if you can’t help me any further regarding this topic.
I have a two week deadline and the most important things are fixed already. I need to figure out how to fix my mobile issues, I just wanted you guys to know about these issues.