Skip to content

Instantly share code, notes, and snippets.

@jeremybise jeremybise/baseof.html
Last active Jul 23, 2019

Embed
What would you like to do?
Google Fonts via config with Hugo
<!-- 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;
}
@dkotama

This comment has been minimized.

Copy link

commented Jul 20, 2019

thank you worked perfectly

for everyone that get error on stylesheet.scss telling that line 3 braces error,
it mean you should tweak how the hugo scss pipeline works,
you should enable the executeAsTemplate first
refer to this link

https://blog.fullstackdigital.com/how-to-use-hugo-template-variables-in-scss-files-in-2018-b8a834accce

@dkotama

This comment has been minimized.

Copy link

commented Jul 20, 2019

please revise config.toml to have the variable below params nested

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

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

This comment has been minimized.

Copy link
Owner Author

commented Jul 23, 2019

Thanks! I'm glad it was helpful. I revised the nesting. Good catch.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.