Adding Custom Fonts to Minimal Mistakes

January 5, 2023

Changing the default font to your Minimal Mistakes (MM) website is extremely easy. Just follow the steps outlined below.

Step 1 - Choose a font you want to use

To start, you will need to find a .ttf or .otf file of your chosen font.

Here are a couple neat websites:

Font Squirrel - Large selection of general purpose fonts
CTAN Mirror - LaTeX-based fonts

For the following steps, I chose to use the Computer Modern Sans-serif Roman font.

Step 2 - Decide how you will store your font

Option 1 - Store the font in your MM build

By storing your chosen font within your website, depending on your website’s traffic, fonts will load significantly faster.

For this example I chose to download and store the font within my MM build at assets/fonts/cmunss.ttf

Option 2 - Grab an online link to the .ttf or .otf file

This option bypasses having to store your font in your MM build, but may result in slower webpage loading times.

Instead of downloading the font, you can equivalently paste the following link from the CTAN website in step 3: http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunss.otf

Step 3 - Modify custom.html

Locate and open the custom.html file in your Minimal Mistakes folder, usually located under _includes/head/custom.html. Insert the following code snippit.

<head>
    <style>
        @font-face {
            font-family: "Computer Modern Sans";
            src: url("/assets/fonts/cmunss.ttf") format('truetype');
            font-weight: sans-serif;
            font-style: normal;
        }

        body {
            font-family: "Computer Modern Sans", sans-serif;
        }
    </style>
</head>

Note The url entry changes depending on if you chose option 1 or 2 for step 2.

Step 4 - Modify _variables.scss

Lastly, we need to tell MM to use the newly implemented font. Open _sass/minimal-mistakes/_varaibles.scss.

@mmistakes has a good discussion on what to change in this file. But as another example, the changed lines in _varaibles.scss that were made to this website are shown below:

/* system typefaces */
$sans-serif: 'Computer Modern Sans', sans-serif !default;
$sans-serif-narrow: 'Computer Modern Sans', sans-serif !default;

$global-font-family: 'Computer Modern Sans', sans-serif !default;
$header-font-family: 'Computer Modern Sans', sans-serif !default;
$caption-font-family: 'Computer Modern Sans', sans-serif !default;

Step 5 - Save and refresh your changes

All done! Build your website and enjoy your new font!

Kal Monroe