[Resolved] The Font I am Using is not Getting Applied to the Mobile Site

[najarine]

Hi,

I am using the Trebuchet MS font which is a theme default font, when I am using theme fonts, the site is not requesting extra requests to the server when I do so. I have tried adding fonts to the child theme using google font helper, funchtions.php, and style.css (I can not use google fonts because of speeding issues), But it is also requesting extra requests to the server when i am hosting fonts from my website using the child theme method.

My question is, how come theme default fonts are not requesting extra requests and when I add fonts to the default fonts, it is requesting extra requests to the sever?

And most importantly,

Even if i am using the Trabuchet MS font as default (which is a system default font, and inheriting the rest of the fonts from it), that font is not getting applied to the mobile version of my sites.

Can you please help?

Here is an example site which is facing the issue: Tuners Read

Best Regards,

Tawsif Shah Mostafa

[David]

Hi there,

the Theme doesn’t have any fonts built in, if it did then network request would be made to load those fonts.
However, Trebuchet MS was one of the original Core Fonts for the Web and is included in Windows and MacOS systems but not Android ( which used to have only Droid, later it was changed to Roboto).

If you need Trebuchet to load across all devices then the only way is to add it locally which will require a network request regardless of whether the font is loaded on the devices itself. The only time it won’t make the request is if the browser already has the font cached.

[najarine]

Hi,

I have to use a system font by hook or by crook to keep it speed optimized. Local font importing makes extra requests. Is there any system font on GeneratePress that is supported by all devices and browsers?

And if I add a media query CSS to force the Trebuchet MS (or a font that is not supported by all the devices and browsers) to lead on android and phone devices, will it work? And if it works, will it increase the number of requests?

I am really having a hard time to find a good system font that is supported by all the devices or browsers.

Does Tahoma support by all the devices and browsers? Because when I am using Tahoma, still the mobile version is showing the same default font. In fact, the System Stack is also having the same result. I have tried clearing caches.

Can you please suggest me a solution?

Regards,

Tawsif Shah Mostafa

[David]

To be clear – System Fonts are not installed in the Theme, they are just a list of common fonts that are installed as standard on Windows and Apple devices. In the past they were known as the Web Safe Fonts or the Core Fonts for the Web.

Now the problem – Android does not include any of them. Here is the latest list of Android fonts i could find.

║ FONT FAMILY ║ TTF FILE ║
╠════╬════════════════════════════╬═════════════════════════════╣
║ 1 ║ casual ║ ComingSoon.ttf ║
║ 2 ║ cursive ║ DancingScript-Regular.ttf ║
║ 3 ║ monospace ║ DroidSansMono.ttf ║
║ 4 ║ sans-serif ║ Roboto-Regular.ttf ║
║ 5 ║ sans-serif-black ║ Roboto-Black.ttf ║
║ 6 ║ sans-serif-condensed ║ RobotoCondensed-Regular.ttf ║
║ 7 ║ sans-serif-condensed-light ║ RobotoCondensed-Light.ttf ║
║ 8 ║ sans-serif-light ║ Roboto-Light.ttf ║
║ 9 ║ sans-serif-medium ║ Roboto-Medium.ttf ║
║ 10 ║ sans-serif-smallcaps ║ CarroisGothicSC-Regular.ttf ║
║ 11 ║ sans-serif-thin ║ Roboto-Thin.ttf ║
║ 12 ║ serif ║ NotoSerif-Regular.ttf ║
║ 13 ║ serif-monospace ║ CutiveMono.ttf

Of these fonts to the best of my knowledge Android uses Roboto for Sans fonts and NotoSerif for Serif fonts.

This means there is not a System Font you can choose that will be displayed on Android devices.

You’re options are:

1. If you want the same font across all Devices then you need to use a Google font or serve a local font.

2. Choose a system font for Windows and Apple and let Google do its own thing. Based upon it using Roboto by default then choose a similar Sans font.

But just to clarify the Theme has no control over this it is purely down to the device having a font or not having a font.

[najarine]

Thank you for your help, David! I really appreciate it.

[David]

You’re welcome – its a confusing subject so i am sure others will find it useful.

[Author]

Posts