Skip to content

Instantly share code, notes, and snippets.

@jeremybise jeremybise/baseof.html
Last active Oct 17, 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.

@mfuxi

This comment has been minimized.

Copy link

commented Oct 11, 2019

What should be the location of the .scss file?

@jeremybise

This comment has been minimized.

Copy link
Owner Author

commented Oct 11, 2019

What should be the location of the .scss file?

I put it in assets/scss either in my theme or in the root Hugo site directory, depending on how I'm doing it. I hope that helps.

This tells a little more about pipes and the assets directory: https://gohugo.io/hugo-pipes/introduction/

@mfuxi

This comment has been minimized.

Copy link

commented Oct 17, 2019

Is it possible to control the Google font color from the config.toml ?

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.