Skip to content

Instantly share code, notes, and snippets.

@jeremybise
Last active March 12, 2024 08:10
Show Gist options
  • Save jeremybise/a6afea2d4c7f9044180ffeb663a617cf to your computer and use it in GitHub Desktop.
Save jeremybise/a6afea2d4c7f9044180ffeb663a617cf to your computer and use it in GitHub Desktop.
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;
}
@jeremybise
Copy link
Author

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

@mfuxi
Copy link

mfuxi commented Oct 11, 2019

What should be the location of the .scss file?

@jeremybise
Copy link
Author

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
Copy link

mfuxi commented Oct 17, 2019

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

@thisnameismeta
Copy link

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
Copy link
Author

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

@opensourcebangladesh
Copy link

I can use google font! I Rendering error!

I use Doks[Documentation Theme]

image

@simplesalt
Copy link

simplesalt commented Feb 7, 2022

@dkotama Could you kindly be more specific about how to do the ExecuteAsTemplate? the linked blog post doesn't break it down to the level I can understand, and it's still not working for me.

Background: I generated my hugo site from stackify, and am using cloudflare's hugo instance to regenerate. I'm not entirely sure if they're using hugo extended, but there was a pre-existing const variable defined in main.scss that it handled just fine
$palette: ( colorlabel1: #hex1, ... )

I put my font variable declarations in main.scss because it has the rest of the css, and I wanted them all in one place:
$font-heading: {{ $.Site.Params.heading_font | default "'Roboto', sans-serif" }}; $font-body: {{ $.Site.Params.body_font | default "'Roboto', sans-serif" }}; $font-code: {{ $.Site.Params.code_font | default "'Roboto', sans-serif"}}

I then modified the existing scss processing line in baseof.html from:
<link rel="stylesheet" href="{{ (resources.Get "sass/main.scss" | resources.ToCSS (dict "indentWidth" 4 "outputStyle" "nested" "precision" 10 "targetPath" "css/main.css")).Permalink }}"> {{ if .Site.Data.config.favicon }}
to:
{{ $main := resources.Get "sass/main.scss" | resources.ExecuteAsTemplate "style.main.scss" . | resources.ToCSS (dict "indentWidth" 4 "outputStyle" "nested" "precision" 10 "targetPath" "css/main.css").Permalink | fingerprint }}
<link rel="stylesheet" href="{{ $main.Permalink }}">

as it seemed your cited blogpost was directing me to do. It fails with repeated instances of:
ERROR 2022/02/06 11:54:12 render of "page" failed: "/opt/buildhome/repo/layouts/_default/baseof.html:27:112": execute of template failed: template: _default/post.html:27:112: executing "_default/post.html" at <resources.ToCSS>: error calling ToCSS: invalid options type: unable to cast <nil> of type <nil> to map[string]interface{}

Thanks for the help 4 years later!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment