Hugo Custom Font
Technology
Image generated by deepai.org -- Hugo site generator, custom font configuration, software developer, slash-zero font
Sometimes the smallest things can take forever to get done. Such was the case with changing the font for RelpTo.
Why change?
The old font was okay. I think it was Verdana. A sans-serif font which looked fine and I still am using on my rather non-technical blog, https://occultalchemy.com. On ReplTo though there is one little detail which I couldn’t let slide which doesn’t matter on my other site.
The zero with a slash is missing! Readability for me is improved with zeros which don’t look much like “ohh”’s which is how I have Emacs set up for programming.
As many technical articles have code fonts with slash-zero are very much preferred. Monospace fonts also set a certain tone or feeling, I feel, which fits a technical blog nicely.
After too much tinkering I did finally decide on a font. Inconsolata is what I went with and nicely is also what I use with Emacs.
Adding a New Font to Hugo
What follows is how I set up my site to use the Inconsolata font.
In the static directory of the local site root you create a css directory for a custom.css file. Anything in the static directory of your local hugo site root gets copied over as-is to the rendered site in the public folder created by Hugo during processing.
static/css/custom.css
The custom.css file is where we set the font family we want to reference and where to find the files defining the font. In this case, I am providing the font files which I downloaded
@font-face {
font-family: 'Inconsolata';
src: url('/fonts/Inconsolata.otf') format('opentype');
}
Copy the font file you downloaded to the static/fonts directory:
static/fonts/Inconsolata.otf
The Hugo theme I am using has a partial available called custom_head.html. Anything put in this file will get placed with whatever else is already there. The partial is found here:
layouts/partials/custom_head
What it looks like after Hugo renders the site. Note the reference to the static directory is dropped since Hugo only takes what is in the directory and not the directory itself.
<head>
....
<link rel="stylesheet" href="css/custom.css">
....
</head>
If your Hugo theme doesn’t have something similar you should be able to put it in whatever _default template has the head section.
Finally, we have the file. A partial named style.html which contains all the CSS formatting and references the font to use. In order to override the CSS from the theme copy the file to:
layout/partials/style.html
Changing the CSS
Then in this case edit to reference the new font instead of the old one. All I did was change the font-family line.
<style>
body {
font-family: "Inconsolata", monospace;
margin: auto;
padding: 20px;
max-width: 720px;
text-align: left;
background-color: #fff;
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 1.5;
color: #444;
}
......
When you check your site you should see all the text in your new font! To render locally for testing:
$ hugo -D server
Not too hard. Something which threw me though was browser differences. My Firefox on MX Linux was rendering the zero slash as dots in zeros. Which is better than nothing but still….
Then when I went to bed after resigning myself to not having slashed zeros I checked the site on my iPad. In both Safari and Firefox on the iPad I saw slashed zeros! So it did work.
Always good to have a few ways to see how your site looks. Even after all this time browsers are not all the same.
Share with Friends!