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:
- Run
npm i @fontsource/montserrat
- 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";
- 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:
- First put your font files (even just
.ttf
format) insrc/assets/fonts
- In file
src/utils/fonts.scss
import your fonts with theFont-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);
- 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";
- Open your
src/config/variables.scss
and assign the fonts:
$Typography-font-sans-custom: "Barlow";
$Typography-font-serif-custom: "SourceCodePro";