<!-- 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; | |
} |
This comment has been minimized.
This comment has been minimized.
please revise config.toml to have the variable below params nested
|
This comment has been minimized.
This comment has been minimized.
Thanks! I'm glad it was helpful. I revised the nesting. Good catch. |
This comment has been minimized.
This comment has been minimized.
What should be the location of the .scss file? |
This comment has been minimized.
This comment has been minimized.
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/ |
This comment has been minimized.
This comment has been minimized.
Is it possible to control the Google font color from the config.toml ? |
This comment has been minimized.
This comment has been minimized.
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. |
This comment has been minimized.
This comment has been minimized.
@thisnameismeta Sure, use it for anything you like, my friend. Glad it's helpful. |
This comment has been minimized.
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