[Resolved] New Issue with Dynamic fonts

[FunkyCss]

Hi there I have played a bit with the new font system and work on a new site with that.

Today I noticed something strange again in the link I have send you.

I use Georgia for headings and system default for body.

When I visit the website from Chrome everything looks ok ( except that fonts are smaller ( xiaomi ) )

When I visit the website from Firefox via mobile Georgia does not work and I notice some extreme paddings and line heights ex. In slide navigation.

Is something I miss in the font settings in customizer?

I have choose defaults and no font weights or something

Please test on Firefox , Chrome ( mobile )

No other plugins are been used except GB GP

[Ying]

Hi there,

I checked on my mobile device (iPhone) on Chrome and firefox, both works well, the font was correct and I didn’t see anything wrong with paddings on the off canvas menu.

Have you already fixed this?

Let me know 🙂

[FunkyCss]

Hi There

I checked both on a couple of devices and they look broken.

My collegues that are developers also checked on their phones and reported the issue, I am not sure how you did not see it.

Maybe is some compatibility issues with Generateblocks as the page is created with GB ? I dont know.

This fact never has happened with the previous GP typography, It was out of the box ready and Bug free.
That fact even if it is not a bug makes it problematic for the end user.

I will send you pics bellow.

[FunkyCss]

1. Mobile Chrome

And How it should look like ( Only thing is that paragraph is smaller ) – I have reported this again and the topic is unsolved as there is a question about Xiaomi Devices

https://ibb.co/vvK2rcs
https://ibb.co/KGz1mPD
https://ibb.co/FBHWqCr

2. Firefox Mobile ( Tested on Samsumng, Xiaomi, Lg, Huawei ) – All of them show it wrong!

https://ibb.co/J2FwN3L
https://ibb.co/CsH5F0Z

This is the second third time I notice something strang, or maybe is hard to use from an advanced GP user the last three years.

Have in mind that this issue is only on MOBILE DEVICES. not on PC browser.

My current setup

1)NGINX server
2)Wordpress latest Release
3)Generatepress Theme
4)Generatepress Premium
5)Woocommerce Latest Release.

My options at Font Manager

Times New Roman
Georgia

My options at Typography Manager

Base – Body – New Time Roman – Defaults.
All headings – Georgia – Defaults.

[David]

Hi there,

the issue stems from using System Stack fonts.

lets break this down. This is the CSS that is generated by GP based upon your Typography selections:

body, button, input, select, textarea {
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

h1, h2, h3, h4, h5, h6 {
    font-family: Georgia;
}

GP is not doing anything other than that. Theres no font requests and no other code that interferes with font rendering. All its doing is telling the browser “I would like you to use these fonts”. The rest of it is down to the browser.

Looking at your screenshots.
1) None of the android browsers are loading Georgia.
2) Thats because Georgia isn’t a system font on Android devices.
3) Chrome at least recognises Georgia as a serif and uses its system font as an alternative: Droid Serif
4) Firefox isn’t that ‘smart’ so it just uses the System Stack.

What to do about Georgia – options:

1. In the Font Manager, change Georgia for Georgia, serif – then at least FF will know to use a serif replacement.
OR
2. Locally install Georgia font on your site, so all browsers can load it. But you will require your own licensed copy of the font.

Other Fonts.

Same issue here – you use a system stack for your fonts, what font Firefox chooses is up to it.
You can of course create your own system stack in the Font Manager, by simply adding a new font and entering the font stack names eg.

myfont, anotherfont, andanotherfont, sans-serif

[FunkyCss]

Hi David,

I think I start to understand what you say,

But I believe that this is not how it worked previously.

I dont remember ever , my GP sites to require all this effort to simply output Georgia , or Helvetica even if they dont are system fonts. I have created so many websites with GP and thousands of user never have reported any issue with fonts on my websites.

This happened only now .

For the matter of fact I just now created a staging site, with the old font managment and this issues seems to fly away.
The new system makes me feel that is hard to figure how it works , and I am not pretty sure if this is the issue.

Is terrible when in one device there is one font and in other is completely different.

I was so much into recreating my website with GB and GP , but now i think i will sit with the old one and not with GB as for me looks really hard to solve this kind of issues.

[FunkyCss]

Please David, Can you check the last link I have provided, This is rendering Georgia also Helvetica in androind devices and uses the old GP font.

If you think about that , every single GP user that will update to the new font system, has to make a ton of work to make its old sites work right, this sounds to me with no compability on implementing this one.

I understand what you say about the font rendering, how is even possible one site that has the old system to render in the same device the font on the other hand with the new font system not to be able to do that.

You can test on Firefox

Friendly

Andreas

[David]

The System Stack option hasn’t changed in GP – so i can’t see why that would be any different between 3.0 and 3.1.

For the Georgia font – this is how simple the change you need to make is:

[FunkyCss]

Hello David,

I see what you say, thanks for your precious time I really appreciate that.

[David]

You’re welcome

[Author]

Posts