Statamic Peak Docs

Custom fonts

Custom fonts don't really have much to do with Peak, but you often need them setup. This is how.

Convert your font files

If you don't have .woff and .woff2 font files you can convert your licensed or free fonts easily on fontsquirrel.comopen in new window. For modern browsers (those that support grid) you really only need .woff2 files. Including both won't hurt though. The browser only downloads the files it uses.

Include your fonts

You can place your font files somewhere in your resources folder. For example in resources/fonts. This directory doesn't exist by default.

Now it's time to add the @font-face rules to your CSS build. You can put it the Tailwind CSS base layer in resources/css/custom.css. Let's say we have one font family with two weights, both in italics.

@layer base {
    @font-face {
        font-family: 'awesome';
        src: url('/resources/fonts/awesome-regular.woff2') format('woff2'),
            url('/resources/fonts/awesome-regular.woff') format('woff');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'awesome';
        src: url('/resources/fonts/awesome-regular-italic.woff2') format('woff2'),
            url('/resources/fonts/awesome-regular-italic.woff') format('woff');
        font-weight: 400;
        font-style: italic;
        font-display: swap;
    }

    @font-face {
        font-family: 'awesome';
        src: url('/resources/fonts/awesome-bold.woff2') format('woff2'),
            url('/resources/fonts/awesome-bold.woff') format('woff');
        font-weight: 700;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'awesome';
        src: url('/resources/fonts/awesome-bold-italic.woff2') format('woff2'),
            url('/resources/fonts/awesome-bold-italic.woff') format('woff');
        font-weight: 700;
        font-style: italic;
        font-display: swap;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

Vite will serve those fonts when running npm run dev. When you run npm run build it will copy them over to the build folder and version them.

Note that all font-family share the same name. It's just the properties (weight and style) that change according to the font file being used.

Configure Tailwind CSS

The default Peak Tailwind CSS configuration assumes you might want to use custom fonts so it's easier to implement them. Let's say our font awesome is a sans-serif font and it's the only font we're currently using. The relevant part of the configuration in tailwind.config.site.js would look like this:

module.exports = {
  theme: {
    // Remove the font families you don't want to use.
    fontFamily: {
        sans: [
        // Use a custom sans serif font for this site by changing 'Gaultier' to the
        // font name you want and uncommenting the following line.
        'awesome',
        ...defaultTheme.fontFamily.sans,
        ],
    },
    // The font weights available for this site.
    fontWeight: {
        // hairline: 100,
        // thin: 200,
        // light: 300,
        normal: 400,
        // medium: 500,
        // semibold: 600,
        bold: 700,
        // extrabold: 800,
        // black: 900,
    },
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

Note that we don't extend the configuration here but rewrite it. That way we only have classes that actually belong to fonts we want to use.

Using the fonts

In your templates you can now use font-serif (with a fallback stack), font-normal, font-bold, italic and not-italic.