System font stack

[thecashbag]

I’m getting rid of Google fonts for speed optimization purposes and using a System Font Stack instead.

This is my CSS:

body {
    font-family: Georgia,Cambria,"Times New Roman",Times,serif;
}

.h1, h1, .h2, h2, .h3, h3, .h4, h4, .h5, h5, .h6, h6, .header-font {
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;
}

It’s working fine when I assign headings and text elements, because it will use the CSS above, but I am having trouble with buttons inside the content editor because the font-family will “inherit” the default body style, not the header system font-stack.

How can I make buttons conform to my header system font stack?

And is it possible to set up a system font stack within your font editor? Because that would make things easier.

[rad]

Hi @thecashbag,

Thanks for reaching out.

You can try this too,

.x-btn, button, input[type="submit"], input[type="button"] {
font-family: Georgia,Cambria,"Times New Roman",Times,serif;
}

CSS will only work to the elements you’re applying it with, so inherit may not work depending on its parent styling. And you only applied it to the body and headings where the buttons can’t inherit it.

Thanks!

[thecashbag]

Thanks, I am actually trying to apply the header font to the buttons instead of the inherited body font.

So your code should probably look like this:

.x-btn, button, input[type="submit"], input[type="button"] {
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;
}

But this does not work anyway. It still inherits the body font.

Looking at the code .x-anchor-text class would work, but does that class affect other elements besides buttons?

P.S. Can I set a system font stack inside your Font Manager somehow? That would make things much easier. If not, can I please suggest this as a feature, as many sites are now using system font stacks for optimization reasons.

[rad]

Hi @thecashbag,

That’s not possible. The system font that you are applying is specific to Apple/Mac. But you can try this

.with_system_font .x-anchor-text { font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif; }

Then inspect your button and go to customize section and add with_system_font to its class.

Thanks!

[thecashbag]

Hi Rad,

Thanks for the suggestion.

The system font is a “stack” so it applies to many different machines, not just Apple/Mac. The idea being you use the native font of the operating machine the user is on. So if user is not on a Mac it skips the Apple font (because it will not be found) and uses the next font in the stack it knows, and it keeps doing that until it finds a font matching the operating system of the user.

You can check out more details here if you’re interested: https://css-tricks.com/snippets/css/system-font-stack/

It’s a better way of handling fonts, because the user sees a font they are familiar with (their operating system font) and also it runs fast because no query to Google for Google fonts.

Your suggestion of using a custom class is a good work around, but it would be better if we could “stack” system fonts inside your Font Manger by creating a font-family. That way it would work better with the content editor and be a much more streamlined process.

Can you please add this idea as a suggestion to your feature list? System font stacks are growing in popularity now and it would be a small change to implement.

Thanks,
Ben

[paul.r]

Hi Ben,

I have forwarded this as a Feature request.

Thank you for your feedback.

Have a nice day!