5 min read

Blogdown: change Lithium theme font-face

Matt Dray (@mattdray)

Lithium by Nirvana (via Giphy)

Lithium by Nirvana (via Giphy)

Blogdown and Hugo themes

You can change the default font face for your Blogdown blog by downloading new ones from Google Fonts and adjusting some CSS.

Sections 2.5.1 and 2.7 of the Blogdown book refer to the ability to change fonts for your site. This post explains how to do it for the Lithium theme – the theme being used on this site.

The Lithium theme for Hugo was built originally by Jonathan Rutheiser. Yihui Xie then tweaked it for use with Blogdown. The advice below may still be relevant for other themes.

The default CSS

Below is the default fonts.css file for the Hugo Lithium theme. It sits at the filepath themes/hugo-lithium-theme/static/css/fonts.css. CSS files are basically style instructions that inform how HTML files (like our blogposts) should be rendered.

The @font-face {} sections describe the details of the font you’re using: the name of the font face, its style and weight, and where the path to the files. This CSS file also specifies the fonts that certain HTML elements that should be styled with (e.g. body for body text). The sections between slashes and stars – /* example */ – are just comments and aren’t integral to the code.

You can see a demo of these defaults.

/* Default font 1 */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  src: local('Merriweather'), local('Merriweather-Regular'),
       url('../fonts/merriweather-v13-latin-regular.woff2') format('woff2'),
       url('../fonts/merriweather-v13-latin-regular.woff') format('woff');
}
/* Default font 2 */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'),
       url('../fonts/lato-v11-latin-regular.woff2') format('woff2'),
       url('../fonts/lato-v11-latin-regular.woff') format('woff');
}
/* Specify how to use the font faces */
body {
  font-family: 'Merriweather', serif;
}
h1, h2, h3, h4, h5, h6, .nav, .article-duration, .archive-item-link, .footer {
  font-family: 'Lato', sans-serif;
}

So the two default font faces for this theme are Merriweather (sans-serif) and Lato (serif). Merriweather is being used for the body text and Lato for basically everything else (e.g. h1 first level headers).

You actually specify a list of font families for each HTML element. We have two: font-family: 'Your-Font-Name', serif;. This instructs the system to display first your font of choice – Your-Font-Name in this case – and to fall back to the system’s default serif font if that fails for whatever reason. There’s nothing stopping you from adding several named fonts in preference order and separated by commas.

So let’s start by getting some new font faces.

Get font faces

For this demo, I’m using Google Fonts. I learnt a lot by looking at Google Web Fonts helper.

Once you’re on the specimen page for a given font – like this one for Fira Sans – you can click ‘SELECT THIS FONT’ to add it to a list for later viewing. You can access this list at the bottom right of the page in a drawer that says ‘X Families Selected’. I like Fira Code and use it as my code-editor font-face thanks to its pretty ligatures.

The font-family selection tray on Google Fonts

The font-family selection tray on Google Fonts

There’s some useful information in this drawer. For example, there are two chunks of CSS under ‘EMBED’: one to help embed the font and one to specify in CSS. You’ll need this information later.

To download the font face, you can click ‘CUSTOMIZE’ in the tray to select which elements of the font family you want (light, medium, semi-bold, etc) and then click the download button (downward pointing arrow) in the upper right of the tray. This will download a .zip file containing your font faces in many file formats.

For the Hugo Lithium theme site, fonts live at the path /themes/hugo-lithium-theme/static/fonts/. There you’ll find the files for our two default fonts, Merriweather and Lato. There are two filetypes for each font: .woff and .woff2. WOFF stands for Web Open Font Format.

The .zip file contained lots of filetypes but we can get away with adding just the WOFF files (WOFF and WOFF2). These can both be interpreted by modern web browsers.

Activate fonts

So all we need to do now is to change the fonts.css file. There should be an @font-face element for each font we want (you may want more than two). I’ve also added an instruction to display code blocks using the monospace font, reduced down to 80 per cent of its size so we can see more of it on screen.

/* Update font face 1 */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Fira Sans Regular'), local('FiraSans-Regular'),
       url('../fonts/fira-sans-v8-latin-regular.woff2') format('woff2'),
       url('../fonts/fira-sans-v8-latin-regular.woff') format('woff');
}
/* Update font face 2 */
@font-face {
  font-family: 'Fira Mono';
  font-style: normal;
  font-weight: 400;
  src: local('Fira Mono Regular'), local('FiraMono-Regular'),
       url('../fonts/fira-mono-v6-latin-regular.woff2') format('woff2'),
       url('../fonts/fira-mono-v6-latin-regular.woff') format('woff');
}
/* Set all body text to font face 1 */
body {
  font-family: 'Fira Sans', sans-serif;
}
/* Set other text formats to font face 2 */
h1, h2, h3, h4, h5, h6, .nav, .article-duration, .archive-item-link, .footer {
  font-family: 'Fira Mono', monospace;
}
/* Set font face for code and shrink it */
code {
  font-family: 'Fira Mono', monospace;
  font-size: 80%;
}

Result

We now have:

  • Fira sans as our body text
  • Fira mono for our section headers
  • Fira mono at 80 per cent size for code chunks

That’s what you’re looking at now. Nice.