Wrong font appearing on mobile

[sobarisaxy]

Hi all—

I'm having an issue where the buttons and title on my site appear in the wrong font only on mobile. On desktop, I have them set to GFS Didot. On mobile, they appear as a generic sans-serif font. Not sure how to fix this. My site is michaeljosephpowers.com. Thanks!

[seicolegwr]

@sobarisaxy 

This is a common problem with mobile OS. Browsers can natively only display the fonts pre-loaded into the OS 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 which will probably look different to the font on the website. Mobile OS have a limited load of fonts, this is a particular problem for Android machines, as there are only 3-4 fonts (3 are sans-serif family) pre-loaded into Android. 

The way around this is to specify @font-face rule within your CSS which will force the use of a particular font by linking to a URL source for that font. This works on pretty much all modern browsers, in all OS. It's best to specify TTF, OTF and WOFF font file formats (or just use WOFF and WOFF2) to maximise the probability that your font will be displayed in all browsers, in all versions. This website explains things well and more information can be found here and here

Another option is to create a transparent .png image that displays your title in GFS Didot and upload that in place of your current title. That way, all browsers on all OS will show the title as you intend and you won't have to fiddle with CSS.

Hope this helps, Gary

[PaulMathews]

@seicolegwr This user changed his theme's default title font ("Montserrat", in this case) to the "GFS Didot" font. The font loading should be entirely handled by the Weebly server and, at least on the desktop, it is since the user's web pages render the GFS Didot title font properly. That same font should equivalently render on mobile OS browsers because, just like with the desktop OS browsers, the font loads at the (Weebly) server and doesn't depend on the local OS font library (GFS Didot is not locally available by default on either Windows or macOS but still renders fine in the desktop browser for this user's site).

What appears to be happening instead is that, on mobile only, the title font is reverting back to the default theme font (Montserrat) for some reason. This of course is not related to the mobile OS local fonts library (since Montserrat, like GFS Didot, is not locally available on either iOS or Android so it too should not render on mobile if indeed the issue were related to local fonts). For whatever reason, Montserrat is loading fine on mobile but GFS Didot is not and so the site is using the theme's default title font, Montserrat, as the fallback.

[PaulMathews · Accepted solution]

@sobarisaxy This is likely a Weebly font loading issue on mobile. You presumably changed the default theme title font to GFS Didot in the theme editor. That should cause the Weebly site server to load the font so that it can be displayed wherever you have your title text. The font is definitely not loading on mobile (the theme's default "Montserrat" font is loading instead) but this is not due to an issue with mobile browsers and the local (mobile) OS font library. Your desktop OS likely does not include GFS Didot as one of the available system fonts but it still renders on the desktop browser because the font is loaded at the server end and is not sourced from your computer's local OS fonts. This does beg the question of why the font loads properly on desktop but not mobile but, again, that is likely a (Weebly) server-side issue and has nothing to do with your mobile device.

I'd suggest trying a different serif font from the Weebly font selector for titles. There are a number of fonts similar to GFS Didot. See if that fixes the issue on mobile.