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
    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.

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;

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