Hugo is a static site generator written in Go, known for its speed, simplicity, and flexibility. When using Hugo, we might need to add Google Fonts to our site. This article will introduce how to add Google Fonts in Hugo.

I am using the PaperMod theme, and we can achieve this by modifying the HTML files in the theme. Follow the steps below to add Google Fonts.

Google Fonts

First, go to the official Google Fonts library and find the font you need, such as the Roboto font. Click the View Selected families icon in the top right corner, then click the Get embed code button.

selectd font

On the Embed Code page, you will see two ways to add the font: via a link tag or an @import tag. Here, we choose the link tag method. Copy the code for the link tag.

emned font code

Modify the Theme’s HTML File

Next, find the Hugo theme folder and add the following code to the themes/PaperMod/layouts/partials/extend_head.html file. If you are using a different theme, find the corresponding head.html file and add the code there.

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
  rel="stylesheet"
/>

Using Google Fonts

Finally, declare the font-family as Roboto in the body tag.

body {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  line-height: 1.5;
  margin: 0;
}