[Resolved] Any Plans to Support Global (Tablet/Mobile) Fonts?!

[Jamie]

Pleeeeeease. Haha.

[Tom]

Hi there,

Different font families on tablets and mobile? Or?

[Jamie]

My bad for not being clear. 🙁

I mean, global font sizes. As far as I can see, you’re only able to set a global font size for desktop, and not tablet/mobile?

Maybe I’m wrong (hopefully). 😂

[Tom]

Ah, we add mobile font size options for some of the larger font sizes (site title, h1, h2), but we don’t add them everywhere.

Which elements do you find yourself needing separate options for?

[Jamie]

Ahhh, I just found the mobile settings for mobile!

In answer to your question, the main body copy! 🙂 (under Typography > Body)

[Tom]

Interesting – are you needing a larger font size on mobile?

Usually I’ve found that what works on desktop works nicely on mobile as well, but there are always exceptions 🙂

[Jamie]

Haha, smaller actually!

tbh, I’m probably overthinking it, and attribute this to my OCDic nature lol. I’ve restored everything to a single font size. 😅 💪🏼

[Jamie]

Deleted.

[Tom]

I’ll definitely keep this in mind 🙂

[Elia]

I agree, could you please include the option to make the Mobile fonts smaller than the Desktop? This is definitely would be better for usability.

Thanks a lot

[David]

Hi there,

GP provides font sizing for Mobile and Desktop. As explained here:

https://docs.generatepress.com/article/typography-overview/#font-size

[Elia]

Hi thanks,

But as discussed above there is no option for the mobile body text and other elements

[David]

This is something that we are looking at but it is some very simple CSS to accomplish.

[Elia]

Thanks. Could you please give me the CSS to change the Mobile fonts? I need it for the normal body text pages, blog posts, widgets and comments

[David]

So something like this, body covers the vast majority of paragraph elements:

@media (max-width: 420px) {
    body  {
        font-size: 16px;
    }
    .widgets {
        font-size: 16px;
    }
}

You can increase the max-width property to: 768px to include these changes on tablet. Currently this code will cover the plus size Mobiles.

[Author]

Posts