Change Google Fonts via params - Hugo

_variables.scss

// Typography
//
// Font, line-height, and color for body text, headings, and more.

// stylelint-disable value-keyword-case
$font-family-sans-serif:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
$font-family-base:            $font-body, $font-family-sans-serif;
// stylelint-enable value-keyword-case

$font-size-base:              1rem; // Assumes the browser default, typically `16px`
$font-size-xl:                $font-size-base * 1.375;
$font-size-lg:                $font-size-base * 1.25;
$font-size-md:                $font-size-base * 1.125;
$font-size-sm:                $font-size-base * 0.875;

$line-height-base:            1.5;

$headings-font-family:        $font-heading, $font-family-sans-serif;
$headings-font-weight:        500;

app.scss

/** Hugo font variables */
$font-body: {{ .Param "body_font" | default "null" }};
$font-heading: {{ .Param "heading_font" | default "null" }};

google-fonts.html

{{ if .Site.Params.embed_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=\"https://fonts.googleapis.com/css?family=%s&display=swap\"" $url_part | safeHTMLAttr }} rel="stylesheet">
{{ end -}}

params.toml

google_fonts = [
  ["Merriweather", "700"]
]

embed_google_fonts = false

# heading_font = "Merriweather"
# body_font = "Arial"

stylesheet.html

{{ if eq (hugo.Environment) "development" -}}
  {{ $options := (dict "targetPath" "main.css" "enableSourceMap" true "includePaths" (slice "node_modules")) }}
  {{ $css := resources.Get "sass/app.scss" | resources.ExecuteAsTemplate "style.scss" . | toCSS $options }}
  <link rel="stylesheet" href="{{ $css.Permalink }}">
{{ else -}}
  {{ $options := (dict "targetPath" "main.css" "outputStyle" "compressed" "includePaths" (slice "node_modules")) }}
  {{ $css := resources.Get "sass/app.scss" | resources.ExecuteAsTemplate "style.scss" . | toCSS $options | postCSS (dict "config" "config/postcss.config.js") }}
  {{ $secureCSS := $css | resources.Fingerprint "sha512" }}
  <link rel="stylesheet" href="{{ $secureCSS.Permalink }}" integrity="{{ $secureCSS.Data.Integrity }}" crossorigin="anonymous">
{{ end -}}
<noscript><style>img.lazyload { display: none; }</style></noscript>