Page Comparison

...

Defaults: all: 8, smallScreen: 7

...

Defining fonts families:

Styla can use external sources of font files to be loaded by Styla front-end and Editor preview. Setting them up is only needed for displaying text with a specific font outside of the parent website. Styla content embedded on a website will use font files loaded by this website, so the only thing you need to set up for such case is proper font-family rules.

However, you may need to load external font files to demo content and approve the CSS with your client - even before Styla content has been embedded on the website and is able to use the external font files.

Setting font-family without loading external fonts:

The only thing you need is to set up a list of font names that will populate the font-family CSS property in Styla front-end. They need to match font files loaded by the website or installed on user's machine, otherwise browser will fall back to whatever is defined in the fallback field.

{
    "fonts": {
        "families": {
            "body": {
                "fallback": "sans-serif",
                "fontName": "GlacialIndifference-Regular"
            },
            "cta": {
                "fallback": "Helvetica, sans-serif",
                "fontName": "Oswald"
            },
            "headline": {
                "fallback": "Arial, sans-serif",
                "fontName": "GlacialIndifference-Bold"
            },
            "serif": {
                "fallback": "serif",
                "fontName": "Butler"
            }
        }
    }    
}