In working on a few Hugo themes, I wanted to make it relatively easy to specify custom Google Fonts inside the Hugo config file.

I’m not saying this is the best solution, but this is a solution.

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

Then, we use that partial in our head somewhere.

<head>
  {{ partial "google-fonts" . }}
</head>

Now, in our config.toml, we can do something fairly elegant like:

[params]

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

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

And then we can use those two variables in our SCSS if we want:

$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; 
}

Gist


Published a response?

Let me know the URL here:

WTF is this?