fontswebfontshugogoogle-webfontswowchemy

How can I install Roboto font locally in my Hugo Wowchemy Site?

I'm setting up a new static website using Hugo and Wowchemy. Wowchemy uses the font Roboto, and I want to provide it locally with my website.

That's what I did:

Nothing changed when re-starting the server. Using an add on for firefox, I could see that it is still loading the font from the remote site.

So what changes do I have to add in order to let the browser load my local copy of the fonts?

Solution

  • Steps to go:

    1. Locate the HUGO template directory (somewhere in tmp....)
    2. In the template dir, find the .toml file defining the template's fonts.
    3. Use the URL in the template file to figure out which fonts are loaded with which weights.
    4. Download fonts and the associated CSS via https://gwfh.mranftl.com/fonts
    5. Install the fonts into /static/fonts.
    6. Add the CSS files to /assets/scss, changing their suffix to .scss
    7. Add a custom.scss which @imports the font definitions. Remember that @import is deprecated and will have to be replaced by @use directives in the future.

    Long story:

    In the beginning, we have to find the template files which are downloaded as modules. The easiest way is to call hugo server to make sure the modules have been downloaded, and then go to the path defined in assets/jsconfig.json. The path is relative to the file's location and points straight to the corresponding templare directory. In my case, the string value is "../../../../../tmp/hugo_cache/modules/filecache/modules/pkg/mod/github.com/wowchemy/wowchemy-hugo-themes/modules/wowchemyv5@v5.7.1-0.20221106163805-45466f563a8a/assets/*" From now on, if we refer to the template directory, use the parent directory where this assets directory is located in.

    Next step: Find the .toml file defining the fonts. Go to your hugo build directory and have a look at the configuration file params.yaml (located in config/_default. Find the key for appearance/font, e.g. looking like that:

    appearance:
  theme_day: minimal
  theme_night: minimal
  font: minimal
  font_size: L

    Now find the corresponding font file in the theme directory data/fonts/<....>.toml. This is the original file which makes sure the fonts are downloaded from google. You will find a parameter defining a call to google, looking like this:

    # Font style metadata
name = "Minimal"

# Optional Google font URL
google_fonts = "family=Montserrat:wght@400;700 family=Roboto+Monofamily=Roboto:wght@400;700"

# Font families
heading_font = "Montserrat"
body_font = "Roboto"
nav_font = "Roboto"
mono_font = "Roboto Mono"

    The link tells you which fonts are downloaded and with which weights. Make a note about these values, then create a minimal data/fonts/<...>.toml file in your build directory which overwrites the theme's data. For our purpose, it is enough to make sure that no google font is loaded, so we just use this file:

    # Do not use google fonts via URL
google_fonts = ''

# All further parameters are taken from the theme's 'minimal.toml' file

    Next, download the fonts with the with the appropriate sizes using the tool https://gwfh.mranftl.com/fonts. It's pretty straightforward, and we can use the built-in value for the directory where the fonts are located in. Download the fonts and unpack the archive in static/fonts.

    Then, save the CSS for the downloaded fonts in the directory assets/<...>.scss, where <...> has to replaced by the font name, like roboto. In each SCSS file, also add the following directive to each font declaration:

    font-display: swap;

    Now create a file custom.scss in the same directory which adds your custom font declaration. That can look like this:

    @import "montserrat";
@import "roboto";
@import "roboto-mono";

    That's it! Restart the server and check that the fonts are downloaded. In Firefox, I use the built-in WebDevTools and check what files are loaded.