Modify the font of the navigation bar in Hugo

The cover image is a comparison between the before and after modifications.

Introduction

When building a website, you may notice that the default font is not very appealing. This article will use Hugo as the static site generator and introduce how to change the navigation bar font to your preferred one.

Finding a Font

There are many websites offering fonts online. In this guide, we will use Google fonts to embed fonts into the website

Selecting a Font

First, visit Google fonts and choose a font you like. For example, I selected LXGW WenKai TC. Follow step one in the image below and click the Get font button.

Obtaining the Embed Code

In step two, click the <> Get embed code button.

Next, follow the instructions provided by Google fonts to embed the code into your website.

In step three, switch to the @import option.

Remember the code from steps four and five, as we will use it later.

Embedding the Font

Adjusting the Configuration

Next, locate the hugo.toml or config.toml file in the website root directory and find [params]. Add the following information.

1
2
3
4
5
6
7
8

[params]
  [params.page]
    [params.page.library]
      [params.page.library.css]
        # located in "assets/"
        # Or
        # someCSS = "https://cdn.example.com/some.css"
        customCSS = "/css/custom.css" 

Adding the custom.css File

Navigate to the /assets/css/ directory in the website root and create a custom.css file. Then, add the code from steps four and five in #Obtaining the Embed Code.

1
2
3
4
5
6
7

/* Add LXGW WenKai TC font */
@import url('https://fonts.googleapis.com/css2?family=LXGW+WenKai+TC&display=swap');
.lxgw-wenkai-tc-regular {
    font-family: "LXGW WenKai TC", cursive;
    font-weight: 400;
    font-style: normal;
  }

At this point, the font has been successfully embedded into the website.

Changing the Navigation Bar Font

Viewing the Page Source Code

Here, we use Google Chrome to demonstrate how to extract the page source code. Use the appropriate method for your browser.

On any page of the website, right-click to open the menu and select View Page Source.

Find the text matching the navigation bar text and note the value of the class attribute before it. In the example below, the class attribute for the navigation bar text is menu-item.

Modifying the custom.css File

Return to the /assets/css/custom.css file and add the following code to force the navigation bar font change.

1
2
3
4

/* Change font for navigation bar (Articles, Tags, Categories, About) */
.menu-item { 
    font-family: "LXGW WenKai TC", cursive !important;
}

Remember to replace menu-item and "LXGW WenKai TC" with your class attribute value and font choice. Note that menu-item is preceded by a period (.), which should not be omitted.

The complete code will look like this.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

/* Add LXGW WenKai TC font */
@import url('https://fonts.googleapis.com/css2?family=LXGW+WenKai+TC&display=swap');
.lxgw-wenkai-tc-regular {
    font-family: "LXGW WenKai TC", cursive;
    font-weight: 400;
    font-style: normal;
  }

/* Change font for navigation bar (Articles, Tags, Categories, About) */
.menu-item { 
    font-family: "LXGW WenKai TC", cursive !important;
}

Modifying the link.html File

Finally, navigate to the /layouts/partials/head/ directory in the website root, locate the link.html file, and add the following code at the end to complete the font change for the navigation bar.

1
2
3

{{- /* custom.css */ -}}
{{ $customCSS := resources.Get "css/custom.css" | minify | fingerprint }}
<link rel="stylesheet" href="{{ $customCSS.Permalink }}">

Conclusion

Modifying a website’s font may seem like a small change, but it can significantly enhance the site’s visual appeal, making the overall design better suited to personal style and branding. By selecting the right font, a website can become more attractive and improve the user browsing experience. Additionally, we can assign specific fonts to different elements, adding more depth to the site’s design. Hopefully, this guide will help you successfully change the font of your website’s navigation bar and create a webpage that reflects your unique style!

Environment

• Hugo 0.144.2
• LoveIt theme (version from GitHub on February 21, 2025)

References

• Google. (n.d.). Google fonts. Google. Retrieved March 4, 2025, from https://fonts.google.com/