Use Futura as a Font in Hugo

The default font (Trebuchet MS) of Hermit-V2 is great, but I would like to try something new. Then I found out Futura. It is literally the font used in the title of this page (and other pages).
The following guide can be applied to any font you want, the most important thing is just finding the right font and getting its files.

How to get

• Download .zip file: You can download the font in fontsgeek (for Futura).
• Unzip the .zip file: Now you can see all the subfolders for various variants of the font. Each subfolder has a .ttf or .otf file. You can use these files directly for Hugo but it is recommended to use .woff or .woff2 instead for web applications.
• Convert .ttf/.otf to .woff/.woff2: You can use fontsquirrel to do this. Just choose all the .ttf/.otf files you need to use corresponding to the variants of Futura. The result is a .zip file, and you need to unzip it.
• Move the .woff/.woff2 to Hugo: To use the font, the first thing you have to do is create a fonts folder inside static folder of Hugo. After that, move the files received from the previous step to the fonts folder inside static.
• Config the font: If you are using a theme, you will see a file for fonts (in case of Hugo, it is themes\hermit-v2\assets\scss\_fonts.scss). The default settings would look like this:

$fonts: "Trebuchet MS", Verdana, "Verdana Ref", "Segoe UI", Candara, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;

We will use @font-face to able to use Futura. Just add the following lines in assets\scss\_fonts.scss:

@font-face {
    font-family: 'Futura'; // Mark the font family name as 'Futura'
    src: url('/fonts/futura/futura_book-webfont.woff2') format('woff2'), // The url of .woff2 file
         url('/fonts/futura/futura_book-webfont.woff') format('woff'); // The url of .woff file
    font-weight: 400; // Regular weight
    font-style: normal; // Normal style
}

Then, you can modify the $fonts by adding:

$fonts: 'Futura';

You can also add some additional settings for each part, in a separate file named userstyles.scss (from assets\scss, which will override settings of styles.scss from themes\assets\scss):

body {
    font-family: $fonts; // Or 'Futura' if you want to specify the family font name
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

It looks great!

I mean, this font is what I’ve been looking for a long time. Admittedly, it’s not quite easy to read, but I think it would be great for titles/headers (the one used in these pages).

Another font: Metropolis