Font Not Rendering Properly on iOS and Android Tablet

[NicMunoz]

I'm using the template Xander. I installed an custom font for Titles "Agency FB". It looks great on my Desktop PC and on my Laptop, but then it goes to Helvetica or something like it on Mac Book, iPad, iPhone and Android Tablet. What do I need to do to get the font to render properly on iOS and Android tablet? Site is in development bit.ly/2OcWoKw.

PC DesktopiPhone XiPad

[seicolegwr · Accepted solution]

@NicMunoz 

Normally, web browsers can only display the fonts pre-loaded into the operating system or added later by a user to OS or browser. The browser will search for the font specified in the webpage and if the preferred font isn't there the browser will display a default 'fall-back' font, like Helvetica. MacOS has never loaded Agency FB and Android certainly doesn't, there are only 3-4 fonts pre-loaded into Android. Agency FB is an old font from the early days of the web.

You can add an @font-face to your CSS which will force use of a font by linking to a URL source, this works on pretty much all modern browsers in all OS. It's best to specify TTF, OTF and WOFF font file types (or just WOFF) to maximise the probability that the font will be displayed in all browsers.

Another option is to display any text using Agency FB as an image, either with background colour or transparency. All browsers will then display the font correctly.

Hope this helps, Gary 

[NicMunoz · Accepted solution]

Problem Solved!  The Community to the rescue again. Your reply and a separate e-mail from Chris at Editor Tricks caused me to go back in and re-look at how I installed the custom based on Chris' tutorial onhow to install custom fonts: https://editortricks.weebly.com/how-to-install-any-font-into-your-weebly-site.html  I found that I had missed one important step. I had copied the wrong font family into the "fonts" folder that I had created in ASSETS in the code. Now renders properly on iOS and Android.

[Adam7]

What is the address of your website, @NicMunoz? It might help to post a link to that so our Community members can see the published site in action.

[NicMunoz]

It is in development, here is the address for the preview: bit.ly/2OcWoKw

[Adam7]

Is the site using a custom theme by chance?

[NicMunoz]

It's Xander with some small modiifcations to put in the Custom Font, change colors, remove the color banner overlay.

[seicolegwr · Accepted solution]

@NicMunoz 

Normally, web browsers can only display the fonts pre-loaded into the operating system or added later by a user to OS or browser. The browser will search for the font specified in the webpage and if the preferred font isn't there the browser will display a default 'fall-back' font, like Helvetica. MacOS has never loaded Agency FB and Android certainly doesn't, there are only 3-4 fonts pre-loaded into Android. Agency FB is an old font from the early days of the web.

You can add an @font-face to your CSS which will force use of a font by linking to a URL source, this works on pretty much all modern browsers in all OS. It's best to specify TTF, OTF and WOFF font file types (or just WOFF) to maximise the probability that the font will be displayed in all browsers.

Another option is to display any text using Agency FB as an image, either with background colour or transparency. All browsers will then display the font correctly.

Hope this helps, Gary 

[NicMunoz · Accepted solution]

Problem Solved!  The Community to the rescue again. Your reply and a separate e-mail from Chris at Editor Tricks caused me to go back in and re-look at how I installed the custom based on Chris' tutorial onhow to install custom fonts: https://editortricks.weebly.com/how-to-install-any-font-into-your-weebly-site.html  I found that I had missed one important step. I had copied the wrong font family into the "fonts" folder that I had created in ASSETS in the code. Now renders properly on iOS and Android.

[Adam7]

That's great, @NicMunoz!

[vickyhu]

Hi @Adam , 

I'm experiencing this same issue where my custom fonts aren't rendering on mobile devices or Windows, only on my macOS. I've followed the steps outlined here: https://community.weebly.com/t5/Site-Editor/Why-can-t-I-get-more-fonts/m-p/295#M21 and here, https://editortricks.weebly.com/how-to-install-any-font-into-your-weebly-site.html. However, still no luck. Would you be able to take a quick look and see if there's anything I'm missing or if I'll have to use different fonts? I thought I'd check before I change them to other fonts that might also not work. Thank you for your help! 

[Bernadette3]

Hi @vickyhu I was going to say that it is probably because the theme is custom, but when I look at your mobile site the fonts look to be the same as the desktop version. Is there a particular page or section that is showing different fonts for you? 

[vickyhu]

Hi @Bernadette ,

My custom fonts are appearing on my published site when I'm on my laptop, but not on mobile phones or Windows desktops. I didn't have any troubles with using the fonts on the site, only viewing them on different devices after it's been published. 

[vickyhu · Accepted solution]

Hi @Bernadette ,

I was able to figure it out! I used this site, https://dopiaza.org/tools/datauri/index.php, to replace some of my @font-face CSS coding, specifically the italicized portions below, and it worked! All browsers are now displaying the custom fonts. 

@font-face {

  font-family: 'Cera Pro';

  src:  url('fonts/cerapro-regular.woff2') format('woff2'),

        url('fonts/cerapro-regular.woff') format('woff');

}