-
-
Save jeremybise/a6afea2d4c7f9044180ffeb663a617cf to your computer and use it in GitHub Desktop.
| <!-- 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; | |
| } |
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"
Thanks! I'm glad it was helpful. I revised the nesting. Good catch.
What should be the location of the .scss file?
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/
Is it possible to control the Google font color from the config.toml ?
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.
@thisnameismeta Sure, use it for anything you like, my friend. Glad it's helpful.
I can use google font! I Rendering error!
I use Doks[Documentation Theme]
@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!
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