Adding fonts to the website

I am somewhat particular about the aesthetics of what I use and make. As part of my journey to fully understand the ins and outs of operating a GitHub pages website, I wanted to give it a fresh coat of paint using one of my favorite fonts, Questrial.

I first came across this font when I was browsing the catalog of music of a French label, Ultimae Records. Run by Vincent Villuis (who releases as AES Dana), the label specializes in cinematic, professionally mastered electronic music releases with impeccable visual design. I own a sizeable chunk of their releases on CD. As part of their visual overhaul in the latter half of 2017, their font of choice for releases and their website was Questrial. This is a very beautiful typeface with a few quirks (like the “j” character lacking a bottom curve) but is nonetheless readable and elegant for most purposes. It also neatly matches my resume, which sacrifices some professionalism for a very clean and unique look.

Adding this font to the website was simple.

1. I first needed to load Questrial using its Google Fonts URL into _includes/head.html.
2. Edited _sass/no-style-please.scss to have body (the only type of text this website uses) = Questrial.
3. Added the lines body { font-family: 'Questrial'; } and h1, h2, h3, h4, h5, .site-title, .site-nav { font-family: 'Questrial'; } to the file assets/css/main.scss.
4. Finally, I modified head.html to load main.scss after the Questrial font was loaded, and the font successfully displayed on the website after deployment.

To stylize the code font used above, I wanted to use Ubuntu Mono from the eponymous Linux distribution. I’ve been using it as my VSCode editor font ever since I learned how to customize the IDE in high school. Loading it in and ensuring the “code” style of text uses it mirrors the first four steps above.