Setting Up Custom Fonts in Sage

Sage includes an empty resources/fonts/ directory for you to use for any fonts you want to use in your theme.

Add your fonts #

The first step to setting up a font in Sage is to add the woff2 file to the resources/fonts/ directory. Since woff2 usage is so high, you probably don't need to consider any other font file formats.

For this example, we're going to download Public Sans from the google-webfonts-helper. The google-webfonts-helper is a good resource for quickly grabbing font files and their CSS from Google Fonts.

resources
├── css
│   ├── app.css
│   ├── fonts.css    # Create this file
│   └── editor.css
├── fonts
│   └── public-sans-v14-latin-regular.woff2
├── images
├── js
└── views

Add the CSS #

You can place the CSS for your web fonts wherever you'd like. We recommend creating a css/fonts.css file and then importing it from app.css and editor.css:

@import './fonts.css';

Define your @font-face in css/fonts.css:

@font-face {
  font-display: swap;
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  src: url('@fonts/public-sans-v18-latin-regular.woff2') format('woff2'),
}

Add the font to your Tailwind theme #

Open app.css and add the new font family:

@theme {
  --font-sans: "Public Sans", sans-serif;
}

See the Tailwind CSS docs on customizing fonts for more information.