Notes to Self, on Self Hosting Fonts on My Hugo Blog

Writing this down, so that I will not struggle the next time¹, I have to do this.

1. I use Valkyrie for everything on the blog in various weights, except for code and preformatted stuff, which uses Source Code Pro Medium. Both are WOFF2 fonts.
2. Anything in Hugo’s assets/css/extended folder will be picked up by Hugo and bundled into a single CSS file.
3. The fonts are in subdirectories in the static/fonts/font-name folder. Anything in the static folder shows up at the root of the site. ~/mjb/blog/static/images/test.jpg will become /images/test.jpg
4. I’ve created an embed-font-name.css file in the css folder above, with embed instructions generously provided by Matthew Butterick in his font documentation for Valkyrie. I adapted the same for Source Code Pro as well. Here’s a sample of my embed-source-code-pro.css

1
2
3
4
5
6
7
8

@font-face {
    font-family: 'Source Code Pro Medium';
    font-style: normal;
    font-weight: medium;
    font-stretch: normal;
    font-display: auto;
    src: url('/fonts/source-code-pro/SourceCodePro-Medium.woff2') format('woff2');
}

5. Finally, I created a zz-include-css.css file, which I use to overide the default CSS, so I can use my custom fonts. Since it starts with a zz it comes after the files above, that start with embed, in the final munged and minified CSS file.
   These are my instructions to have most text rendered with Valkyrie and code as Source Code Pro Medium²

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

#top {
    font-family: valkyrie;
    font-variant: oldstyle-nums;
}

.post-content pre, code {
    font-family: 'Source Code Pro Medium';
    font-style: medium;
    font-weight: 500;
}

6. Look! So pretty :)

P.S. Subscribe to my mailing list!
Forward these posts and letters to your friends and get them to subscribe!
P.P.S. Feed my insatiable reading habit.