Google Fonts via config with Hugo

## baseof.html
<!-- Wherever your 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;
}
	<!-- Wherever your head tag is located, add the new partial -->

	<head>
	{{ partial "google-fonts" . }}
	</head>
	[params]
	google_fonts = [
	["Fira Code", "400, 700"],
	["Open Sans", "400, 400i, 700, 700i"]
	]

	heading_font = "Fira Code"
	body_font = "Open Sans"
	<!-- 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 }}
	/* 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;
	}