How to use a custom font in 11ty

Posted on: 12-2-2024

This post will explain how to add a custom font to your 11ty project. It will consist of three steps.

Download a custom font
Extend the eleventy config
Use the font in your css

1. Download a custom font

Go the web, for example to fonts.google, download a font to your liking and save it in a folder e.g /src/fonts.

2. Extend eleventy config

The downloaded font needs to be referenced from a css file. This means that the font needs to exist in the folder created from the build command, the output folder.

You can achieve this by telling eleventy to explicity copy a file to the output folder during build time.

In our case we would tell eleventy to copy the folder /src/fonts to the output folder. You do this by using the .addPassthroughCopy() method.

Below is an example of the .eleventy.js file. We also tell eleventy in this example that our input dir is a folder called "src" and that the output folder is named "dist".

.eleventy.js

module.exports = function (eleventyConfig) {
    eleventyConfig.addPassthroughCopy('./src/fonts/');
    return {
        dir: {
            input: "src",
            output: "dist"
        }
    }
};

3. Use the font

If you build your 11ty project using

npx eleventy

and check the "dist/fonts" folder. You will now see your downloaded font.

This font can now be referenced inside a css file using

@font-face

For example:

style.css

@font-face {
    font-family: "Open_Sans";
    src: url("/fonts/Open_Sans/OpenSans-VariableFont_wdth\,wght.ttf");
    font-weight: 400;
}

I hope this helped!