Archived topic

System Stack fonts - adding additional fonts?

5 replies · Started by Baz on January 22, 2021

Viewing posts 1–6 of 6

January 22, 2021 at 3:46 am #1629061

Hi, I've seen a few mentions on this forum about the advantages of using the System Stack fonts.

A popular font stack on many websites seems to be:

font-family: -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans",
    "Droid Sans", "Helvetica Neue", sans-serif;

So, is it possible to add additional fallbacks to the existing GP System Stack e.g. "Roboto", "Oxygen" etc ?

Thanks.

January 22, 2021 at 5:51 am #1629169

You can use the: generate_typography_system_stack filter to replace the System Stack for whatever you need.

Tom provides an example here:

https://generatepress.com/forums/topic/palatino-linotype-font-not-supported-on-mac-and-apple-devices/#post-1422333

January 22, 2021 at 6:57 am #1629422

Thanks David, that snippet you linked to worked great.

Am I correct that I don't need to add any 'font-family:...' CSS to apply these updated fonts throughout the theme? I can see the new font-family has been added to '(index)' in my browser inspector.

Also, are there any plans to update the default GP System Stack fonts, or to offer the ability to choose your own system fonts?

January 22, 2021 at 7:49 am #1629479

Thats correct no CSS required as the System Stack simply outputs that for you.
We're planning an entire revamp of the Typography module in a later update, ill see what we can do about editable System Stack :)

January 22, 2021 at 7:51 am #1629481

Thank you David, enjoy the weekend :)

January 22, 2021 at 7:56 am #1629487

You're welcome - you too!

This archived topic is closed to new replies.

Start building better websites today.