Archived topic
GP Typografy bugs on mobile
5 replies · Started by FunkyCss on September 6, 2021
Hello there,
I noticed the previous days that my websites all created with Generatepress have issues with typography,
Specific in Chrome and Xiaomi default browser, not in Firefox and have not tested on safari.
The issue is that even if I have set 17px the text, when I will visit my sites on mobile the font will decrease a lot,
Take a notice that you cant test it from PC browsers , it looks normal but only on mobiles.. very strange
I have tested up to 4 mobiles and all look the same.
My font is Helvetica 17px both on mobile and pc
I have clear and disabled cache.
Any ideas why this annoying thing is happening ? tested with the default wordpress theme and looks fine.
Also that something maybe help ,
My friends on their mobile they say they see the smaller text everywhere on my websites,
But me I notice this issue only in Woocommerce Product Pages.
I have removed the custom css of me but still nothing, i changed from Helvetica to Verdana and Roboto but the issue is still there.
Hi there,
i checked the site in my dev tools and iphone and i can't see the issue, the fonts are being displayed at the sizes set in the theme and your custom CSS. And there are no errors in the developers console that could lead to an incorrect style of font being loaded.
Its not a theme related issue, all the theme does is serve up the templates and stylesheets and any custom CSS you have added.
Possible issues:
1. CDN/Server Caches are storing a bad stylesheet that is being served to your device.
2. The Device / Browser is not rendering the styles correctly.
NOTE: One other reported case of missing styles on Xiaomi devices came up a few years back:
https://generatepress.com/forums/topic/style-problem/#post-1089543
The user never responded.
Theres been a few others related to Xiaomi/RedMi devices - that don't really have any explanation to what the problem is.
2.1 Check for browser extension conflicts.
3. The Font is not available on that device and being badly substituted.
On that Note: Helvetica and Verdanna are both system fonts, but they are NOT available on all devices. Neither of them are system fonts on Android devices, and neither is Roboto. Those fonts would have to be loaded locally ( or Roboto can be loaded from google fonts ).
Hi David,
Thank you for your fast response and so analytic one.
The issue maybe is with the device but the browser is still Chrome, in the same Device with Firefox everything looks perfect.
I have send a ticket to my Hosting Company but when we spoke a bit on the phone this seemed to them very strange but they will take a look in deep mode.
What is strange also is with the buttons.
When I visit my site from the mobile the woocommerce button ( Styled from Generatepress ) only in a couple of pages and categories looks that the text is displayed block.
ex.
add to
cart
and not - add to cart
So there seems to be a padding that should not be and not in all categories. the category that has an issue to take a look if is possible and make sure is not generatepress related is on the hidden field.
Actually I checked from other mobiles , like Apple and there seem to be fine.
Completely strange, so I guess this is not related to GP.
Thanks anyway I apreciate your time to investigate that one.
Yeah i checked too and couldn't see them.
Some device manufacturers embed their own code that changes the behaviour of the browser or apps. And its sounds like Xiaomi do some weird stuff.
