Fonts

Configure a specific font to style your website.

Hinode uses a configurable font stack that includes support for Emoji across browsers and devices. Review the configuration settings below on how to update the font.

Font Configuration  

Hinode uses a font stack that includes support for Emoji across browsers and devices. You can adjust the main font in the /config/_default/params.toml file in the style section. You can either use fonts from an external provider or serve them locally. To improve performance, Hinode serves the Inter font locally by default.

• config/_default/params.toml

    themeFont = "Inter"
    # themeFontPath = "https://fonts.googleapis.com/css2?family=Inter:wght@200;300;600&display=swap" # external path
    themeFontPath = "/fonts" # local path
    themeFontPreload = "/fonts/inter-v12-latin-regular.woff2"
    fontSizeBase = "1rem" # assumes the browser default, typically '16px'

External Fonts  

Set the themeFontPath to the address of your font provider, such as Google Fonts  :

themeFontPath = "https://fonts.googleapis.com/css2?family=Inter:wght@200;300;600&display=swap"

Hinode enables support for Google Fonts by default. If you use a different font provider, be sure to adjust the Content Security Policy in the Server Configuration. The font-face definitions in the file assets/scss/fonts.scss are ignored when using an external font.

Local Fonts  

To improve performance, Hinode serves the Inter font locally by default. Set the themeFontPath to the following local folder:

themeFontPath = "/fonts"

The font files are retrieved from the folder static/fonts. The Google-Webfonts-Helper  from Mario Ranftl is a helpful tool to download the correct font files. It also generates the proper font-face definitions. Copy the definitions to the assets/scss/theme/fonts.scss file and download the font files themselves to the static/fonts folder.

You can preload the font to improve loading speed. Select the primary font that is used above the page fold. In the next example, we select the Inter regular font of type woff2 to preload. Hinode uses the font file extension to determine the font type automatically.

themeFontPreload = "/fonts/inter-v12-latin-regular.woff2"

Using Multiple Fonts  

You can configure multiple fonts and apply them to different elements of your site. For example, you could pair a serif font with a sans serif font to get a more distinct look and feel. The following example configures Fira Sans as default font. It then configures PT Serif font to headings and display headings specifically.

Define the font stack in params.toml, separating the family names by a comma:

[style]
    themeFont = "Fira Sans, PT Serif"
    themeFontPath = "/fonts" # local path

Use the Google-Webfonts-Helper  to download the two fonts. Copy the font files to your local static/fonts directory. Put the font face definitions in a new file assets/scss/theme/fonts.scss.

Hinode now uses Fira Sans as default font for the entire site, as it is the first font in our custom font stack. We can then use a small stylesheet configuration to apply the serif font to our headings and display headings. Create a new file assets/scss/theme/theme.scss and apply the following style configuration:

h1, h2, h3, h4, h5, h6, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: 'PT Serif';
}

Customization  

The font stack is defined in the assets/scss/common/_variables.scss file. The variable $themeFont is initialized to the value in the Font Configuration.

• assets/scss/common/_variables.scss

$font-family-sans-serif:        $theme-font, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-size-base:                $font-size-base !default;;
$headings-font-weight:          600 !default;
$font-weight-lighter:           lighter !default;
$font-weight-light:             200 !default;
$font-weight-normal:            300 !default;
$font-weight-bold:              600 !default;
$font-weight-bolder:            bolder !default;

$theme-border-radius:           1rem;

strong {
    font-weight:                600 if($enable-important-utilities, !important, null);
}