Fonts

Updated: September 28, 2024

Setting up custom fonts in Hugo.

Table of Contents

GOOGLE FONTS

For Fira Code (normal way for any website)
<link href="https://fonts.googleapis.com/css?family=Fira+Code:400,700&display=swap" rel="stylesheet">

Use the following CSS rules to specify these families:

font-family: 'Fira Code', monospace;
For Hugo

baseof.html

<!-- whereever head tag is located, add the new partial -->
<head>
	{{ partial "google-fonts" . }}
</head>

config.toml

[params]
	google_fonts = [
		["Fira Code", "400", "700"],
    ["Open Sans", "400, 400i, 700, 700i"]
	]

	heading_font = "Fira Code"
	body_font = "Open Sans"

google-fonts.html

<!-- In your partials folder -->

{{ if .Site.Params.google_fonts }}
  {{ $fonts := slice }}
  {{ range .Site.Params.google_fonts }}
    {{ $family := replace (index (.)  0) " " "+" }}
    {{ $weights := replace (index (.) 1) " " "" }}
    {{ $string := print $family ":" $weights }}
    {{ $fonts = $fonts | append $string }}
  {{ end }}
  {{ $url_part := (delimit $fonts "|") | safeHTMLAttr }}
  <link {{ printf "href=\"//fonts.googleapis.com/css?family=%s\"" $url_part | safeHTMLAttr }} rel="stylesheet">
{{ else}}
  <!-- specify a default in case custom config not present -->
  <link href="//fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">
{{ end }}

stylesheet.scss

/* Use the font config as variables in your SCSS */

$font-heading: {{ $.Site.Params.heading_font | default "'Roboto', sans-serif" }};
$font-body: {{ $.Site.Params.body_font | default "'Roboto', sans-serif" }};

body {
  font-family: $font-body;
}

h1, h2, h3, h4, h5, h6 {
 font-family: $font-heading; 
}