Fonts

Customization

Fonts

Learn how to load custom fonts

By default font is loaded based on specific theme. The system automatically selects appropriate fonts based on your chosen theme to ensure optimal readability and visual consistency.

Configuration

{
    "theme": {
        "fonts": {
            "family": "Roboto",
            "src": "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
        }
    }
}

you can also set font settings for specific areas:

{
    "theme": {
        "fonts": {
            "body": {
                "family": "Roboto",
                "src": "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
            }
        }
    }
}

or use any src you want:

{
    "theme": {
        "fonts": {
            "coder": {
                "family": "JetBrains Mono Variable",
                "src": "https://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono:vf@latest/latin-wght-normal.woff2"
            }
        }
    }
}

Atomic Loads

You can also load multiple font atomically by using an array configuration. This approach gives you precise control over which font weights are loaded, optimizing performance by only loading the specific weights you need:

    {
        "theme": {
            "fonts": {
                "coder": [
                    {
                        "family": "Monaspace Xenon",
                        "weight": 200,
                        "src": "https://cdn.jsdelivr.net/fontsource/fonts/monaspace-xenon@latest/latin-200-normal.woff2"
                    },
                    {
                        "family": "Monaspace Xenon",
                        "weight": 400,
                        "src": "https://cdn.jsdelivr.net/fontsource/fonts/monaspace-xenon@latest/latin-400-normal.woff2"
                    }
                ]
            }
        }
    }

Info

This configuration will automatically generate @font-face declarations for each font weight specified in the array.

BundleComing Soon

Bundling helps self-hosting fonts that can significantly improve website performance by eliminating the extra latency caused by additional DNS resolution and TCP connection establishment that is required when using a CDN like Google Fonts.

{
    "theme": {
        "fonts": {
            "body": {
                "bundle": true,
                "family": "Roboto",
                "src": "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
            }
        }
    }
}

Info

This will downloads fonts during build and self-host at the end.

Icons Custom Scripts