Skip to content

Instantly share code, notes, and snippets.

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

@dkotama dkotama 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

@dkotama dkotama 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

@jeremybise jeremybise 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

@mfuxi mfuxi commented Oct 11, 2019

What should be the location of the .scss file?

@jeremybise

This comment has been minimized.

Copy link
Owner Author

@jeremybise jeremybise 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

@mfuxi mfuxi commented Oct 17, 2019

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

@thisnameismeta

This comment has been minimized.

Copy link

@thisnameismeta thisnameismeta commented Jul 25, 2020

Is this code open source? I don't see an attached license file so although this looks like a wonderful solution to a problem, I'm unsure if I can use it in my project.

@jeremybise

This comment has been minimized.

Copy link
Owner Author

@jeremybise jeremybise commented Jul 25, 2020

@thisnameismeta Sure, use it for anything you like, my friend. Glad it's helpful.

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.