Hinode logo
  • About 
  • Docs 
  • Components 
  • Guides 
  • Releases 
  •  
  •    Toggle theme
    •   Light
    •   Dark
    •   Auto
  •  
    •   Light
    •   Dark
    •   Auto
Docs
    • Introduction
    • Commands
    • Hosting and deployment
    • Upgrading
    • Contribute
    • Troubleshooting
    • Content management
    • Content organization
    • Typography
    • Links and cross-references
    • Images and figures
    • Tables
    • Icons
    • Layout
    • Colors
    • Color modes
    • Fonts
    • Languages
    • Navigation
    • Documentation
    • Analytics
    • Modules
    • Abbr
    • Accordion
    • Alert
    • Animation
    • Badge
    • Breadcrumb
    • Button
    • Button group
    • Card
    • Card group
    • Carousel
    • Collapse
    • Command prompt
    • Docs
    • Example
    • File
    • Icon
    • Image
    • Kbd
    • Link
    • Map
    • Mark
    • Navbar
    • Navs and tabs
    • Release
    • Spinner
    • Spinner
    • Sub
    • Sup
    • Timeline
    • Toast
    • Tooltip
    • Overview
    • Styles
    • Scripts
    • Icons
    • Module development
    • Server headers
    • Server-side redirection
    • Credits
    • License
    • Introduction
    • Commands
    • Hosting and deployment
    • Upgrading
    • Contribute
    • Troubleshooting
    • Content management
    • Content organization
    • Typography
    • Links and cross-references
    • Images and figures
    • Tables
    • Icons
    • Layout
    • Colors
    • Color modes
    • Fonts
    • Languages
    • Navigation
    • Documentation
    • Analytics
    • Modules
    • Abbr
    • Accordion
    • Alert
    • Animation
    • Badge
    • Breadcrumb
    • Button
    • Button group
    • Card
    • Card group
    • Carousel
    • Collapse
    • Command prompt
    • Docs
    • Example
    • File
    • Icon
    • Image
    • Kbd
    • Link
    • Map
    • Mark
    • Navbar
    • Navs and tabs
    • Release
    • Spinner
    • Spinner
    • Sub
    • Sup
    • Timeline
    • Toast
    • Tooltip
    • Overview
    • Styles
    • Scripts
    • Icons
    • Module development
    • Server headers
    • Server-side redirection
    • Credits
    • License

Fonts

Share via
Hinode
Link copied to clipboard

Configure a specific font to style your website.

On this page
 

  • Font configuration
    • External fonts
    • Local fonts
  • Customization

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);
}
...
Last updated: August 4, 2023 • Convert to link shortcode (2037db1)
On this page
  • Font configuration
    • External fonts
    • Local fonts
  • Customization
Fonts
Fonts
Hinode is a clean documentation and blog theme for your Hugo site based on Bootstrap 5.
Code licensed MIT, docs CC BY-NC 4.0
Currently v0.21.8
 
Links
Home 
About 
Docs 
Components 
Releases 
Guides
Getting started 
Developing modules 
Optimization 
Versioning 
Community
Issues  
Discussions  
Contribute 
Hinode
Code copied to clipboard