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

```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](https://fonts.google.com):

```toml
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](server-headers). 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:

```toml
themeFontPath = "/fonts"
```

The font files are retrieved from the folder `static/fonts`. The [google-webfonts-helper](https://gwfh.mranftl.com) 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.

Added in 0.23.0

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.

```toml
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:

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

Use the [google-webfonts-helper](https://gwfh.mranftl.com) 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:

```scss
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](#font-configuration).

```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);
}
```