Changing Font in Hugo Theme Cactus

I just want to thank Robbi Nespu as it was his comment that set me on the right path. Although it was an old comment but as Abhijit Hota recommends, it required a little deep dive and Robbi pointed where at.

The font that I am using is Archia; its regular version is free for use. Please read through their license though.

So here goes:

The instructions are being written today the 15th of Jan, 2023 so please bear in mind that they would go irrelavant if the theme author changes them and the font change may break when you upgrade to the (changed) version.

Create a folder under themes\cactus\static\lib and copy your font file(s) in it.

Look for the file _fonts.scss under themes\cactus\assets\scss\ and append the following. You may want to change the font related values as per your requirement.

   @font-face {
        font-family: 'archiaregular';
        src: local("archiaregular"),
            url("../lib/fonts/archia-regular-webfont.woff2") format("woff2"), 
            url("../lib/fonts/archia-regular-webfont.woff") format("woff"), 
            url("../lib/fonts/archia-regular-webfont.eot") format("embedded-opentype"), 
            url("../lib/fonts/archia-regular-webfont.ttf") format("truetype");
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

Look for the file _variables.scss inside themes\cactus\assets\scss\. You’d need to change the value of the variable font-family-body to your new font name:

    $font-family-body: "JetBrains Mono", monospace;

    /* to */

    $font-family-body: "archiaregular", monospace;

And voila you are done!

Note: You’d need to fork the Cactus theme before deploying to production.

I would rather fork the theme and make my changes in the fork just to save myself from the hassle of solving it all over again in the future. Learning how to create a theme should be fun too.