Changing fonts in Quarto

I’ve found changing fonts in Quarto a little bit challenging, so here is a very quick tutorial that you may find useful!

First we need to select our font. For my website I am using FairfaxHD by KreativeKorp (or at least I was when I wrote this blog post!).

The first thing we need to do is to convert our font to the woff and woff2 web font format. Most fonts will come in the .ttf truetype format, but the below code should work (or can at least be adapted) to work with almost any format.

For ease and general accessibility we use the python FontTools library. Running the little script below will then do the conversion when you run it from the same directory the fonts are saved in.

from fontTools.ttLib import TTFont
import os

pwd = os.getcwd()

f = TTFont(pwd + '/FairfaxHD.ttf')

f.flavor='woff'
f.save(pwd + '/FairfaxHD.woff')

f.flavor='woff2'
f.save(pwd + '/FairfaxHD.woff2')

The fonts then need to be moved somewhere in you quarto folder. Exactly where doesn’t matter (as long as its not _site), I keep mine in a base directory called /assets/.

Quarto then needs pointing towards these fonts. This can be done by updating the .sscs file for any website customization we are doing.

If you don’t already have a .scss file you will need to create one and add it to your _quarto.yml like this.

#| echo: true
#| eval: false

format:
  html:
    theme: [cyborg, custom.scss]

The .scss file then needs to contain this code to point our Quarto website towards our new fonts. As I am only using one font across my whole website this is quite straight forward, but you can add in more variations here as you need.

#| echo: true
#| eval: false

/*-- scss:defaults --*/

$font-family-sans-serif: "FairfaxHD";
$font-family-monospace: "FairfaxHD";
$bs-body-font-family: "FairfaxHD.woff";
$web-font-path: "No";

/*-- scss:rules --*/

@font-face {
  font-display: swap;
  font-family: "FairfaxHD";
  font-style: normal;
  font-weight: 400;
  src: url("./assets/FairfaxHD.woff2") format("woff2"),
      url("./assets/FairfaxHD.woff") format("woff");
}