Fonts Configuration and different fonts for heading and body?

[Aman-Aalam]

Hi Folks,

I need help with two things related to fonts:

1. I am trying to style the fonts and bring them on brand as per my style guide, but I the local fonts I provide don't seem to get picked up.
2. Our style guide uses two different fonts : one for headings (<h> and post title), the other for all the body elements. From what I can read and see, looks like the Hinode theme only supports one font.
   Is it possible to set up two fonts without providing my custom CSS?

I have looked at different documentation and example site code:

• Default Fonts Directory
• Font Config
• Fonts documentation

Here's how my config file looks:

    [style]
        themeFont = "SharpSans"
        themeFontPath = "/fonts" # local path

And here's how my fonts directory looks:

├── static
│   ├── fonts
│   │   ├── ProximaNovaBold.woff
│   │   ├── ProximaNovaBold.woff2
│   │   ├── ProximaNovaBoldIt.woff
│   │   ├── ProximaNovaBoldIt.woff2
│   │   ├── ProximaNovaRegular.woff
│   │   ├── ProximaNovaRegular.woff2
│   │   ├── ProximaNovaRegularIt.woff
│   │   ├── ProximaNovaRegularIt.woff2
│   │   ├── ProximaNovaSemibold.woff
│   │   ├── ProximaNovaSemibold.woff2
│   │   ├── SharpSans-Bold.eot
│   │   ├── SharpSans-Bold.woff
│   │   ├── SharpSans-Bold.woff2
│   │   ├── SharpSans-BoldItalic.eot
│   │   ├── SharpSans-BoldItalic.woff
│   │   ├── SharpSans-BoldItalic.woff2
│   │   ├── SharpSans-Book.eot
│   │   ├── SharpSans-Book.woff
│   │   ├── SharpSans-Book.woff2
│   │   ├── SharpSans-BookItalic.eot
│   │   ├── SharpSans-BookItalic.woff
│   │   ├── SharpSans-BookItalic.woff2
│   │   ├── SharpSans-Extrabold.eot
│   │   ├── SharpSans-Extrabold.woff
│   │   ├── SharpSans-Extrabold.woff2
│   │   ├── SharpSans-ExtraboldItalic.eot
│   │   ├── SharpSans-ExtraboldItalic.woff
│   │   ├── SharpSans-ExtraboldItalic.woff2
│   │   ├── SharpSans-Light.eot
│   │   ├── SharpSans-Light.woff
│   │   ├── SharpSans-Light.woff2
│   │   ├── SharpSans-LightItalic.eot
│   │   ├── SharpSans-LightItalic.woff
│   │   ├── SharpSans-LightItalic.woff2
│   │   ├── SharpSans-Medium.eot
│   │   ├── SharpSans-Medium.woff
│   │   ├── SharpSans-Medium.woff2
│   │   ├── SharpSans-MediumItalic.eot
│   │   ├── SharpSans-MediumItalic.woff
│   │   ├── SharpSans-MediumItalic.woff2
│   │   ├── SharpSans-Semibold.eot
│   │   ├── SharpSans-Semibold.woff
│   │   ├── SharpSans-Semibold.woff2
│   │   ├── SharpSans-SemiboldItalic.eot
│   │   ├── SharpSans-SemiboldItalic.woff
│   │   ├── SharpSans-SemiboldItalic.woff2
│   │   ├── SharpSans-Thin.eot
│   │   ├── SharpSans-Thin.woff
│   │   ├── SharpSans-Thin.woff2
│   │   ├── SharpSans-ThinItalic.eot
│   │   ├── SharpSans-ThinItalic.woff
│   │   └── SharpSans-ThinItalic.woff2

[markdumay]

You can configure multiple fonts and apply them to different elements of your site. 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';
}

A temporary demo repository is available on GitHub. I've updated the docs with the above explanation too.

[Aman-Aalam]

Perfect, very graceful.
Thank you!