How to use “system font stack”

Hi @roadlink!

The list of fonts we are showing are just suggestions, but you can write any font family name into our fields. So for example what you see here at the “Family”:
https://smartslider.helpscoutdocs.com/article/1831-layer-typography-design
in CSS will be processed like:

.text{
     font-family: [what you wrote down];
}

If you want to use fonts like this:
https://css-tricks.com/snippets/css/system-font-stack/

then just enter this into our Family field:
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"

Hello,

Please could you let us know where does this css code go into?

I’m not quite clear if goes into CSS section of the Smart Slider, or somewhere else. And once done that, would I need to anything else?

Thank you!

• This reply was modified 3 years, 6 months ago by northwst.

Hi @northwst!

You don’t need to write any CSS codes, because this will be just automatically created by our system. So if you want to use “System font stack” fonts, then all you have to do is to enter this:
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"

into the Family field:
https://smartslider.helpscoutdocs.com/article/1812-layer-style#style
and it will be used.