Skip to main content

Using custom fonts

With fountsource

To use a custom a font the best option is to use fountsource, so first check that the desired font is available browsing their docs page. If it is, including it in your project is a three step process:

  1. Run npm i @fontsource/montserrat
  2. Open your src/layouts/main/index.ts (if you want to import the fonts on all your project's routes) and import the font and its desired variations, e.g.:
import "@fontsource/montserrat/latin-400.css";
import "@fontsource/montserrat/latin-500.css";
import "@fontsource/montserrat/latin-700.css";
  1. Open your src/config/variables.scss and assign the fonts:
$Typography-font-sans-custom: "Montserrat";

With custom font files

These are the 4 steps to use custom fonts in your project:

  1. First put your font files (even just .ttf format) in src/assets/fonts
  2. In file src/utils/fonts.scss import your fonts with the Font-face sass mixin, e.g.:
@include Font-face(Barlow, "Barlow-Regular", normal, normal, ttf);
@include Font-face(Barlow, "Barlow-Italic", normal, italic, ttf);
@include Font-face(Barlow, "Barlow-SemiBold", 500, normal, ttf);
@include Font-face(Barlow, "Barlow-Bold", bold, normal, ttf);
@include Font-face(SourceCodePro, "SourceCodePro-ExtraLight", 100, normal, ttf);
@include Font-face(SourceCodePro, "SourceCodePro-Regular", normal, normal, ttf);
@include Font-face(SourceCodePro, "SourceCodePro-Bold", bold, normal, ttf);
  1. Open your src/layouts/main/index.js (if you want to import the fonts on all your project's routes) and import that file:
import "utils/fonts.scss";
  1. Open your src/config/variables.scss and assign the fonts:
$Typography-font-sans-custom: "Barlow";
$Typography-font-serif-custom: "SourceCodePro";