Use Custom Fonts in Snowfire

It is possible to upload and use custom font files which is visible for the user in Appearance and in the block designer.

Step 1 – Upload the font

Start by uploadin the font in Firecode > Assets. Right click the View button to copy the URL to the font.

Step 2 – Add the font to settings.json

Open settings.json and add a font like the example below. In this example I've used a font file in woff format.

{
    "fonts": {
        "Brown": [
            {
                "weight": "400",
                "style": "normal",
                "src": [
                    {
                        "url": "https://[URL_FROM_STEP_1]",
                        "format": "woff"
                    }
                ]
            },
        ]
    }
}

You might add multiple weights, fonts and formats. Here is a full-fledged example:

{
    "fonts": {
        "Brown": [
            {
                "weight": "400",
                "style": "normal",
                "src": [
                    {
                        "url": "[ADD_URL_TO_FONT]",
                        "format": "woff"
                    }
                ]
            },
            {
                "weight": "700",
                "style": "normal",
                "src": [
                    {
                        "url": "[ADD_URL_TO_FONT]",
                        "format": "woff"
                    }
                ]
            }
        ],
        "Volte": [
            {
                "weight": "300",
                "style": "normal",
                "src": [
                    {
                        "url": "[ADD_URL_TO_FONT]",
                        "format": "opentype"
                    }
                ]
            },
            {
                "weight": "400",
                "style": "normal",
                "src": [
                    {
                        "url": "[ADD_URL_TO_FONT]",
                        "format": "opentype"
                    }
                ]
            },
            {
                "weight": "700",
                "style": "normal",
                "src": [
                    {
                        "url": "[ADD_URL_TO_FONT]",
                        "format": "opentype"
                    }
                ]
            }
        ]
     }
}

Once you save the font should be visible when choosing a font in Appearance or in the block designer.