Last active
March 12, 2024 08:10
-
-
Save jeremybise/a6afea2d4c7f9044180ffeb663a617cf to your computer and use it in GitHub Desktop.
Google Fonts via config with Hugo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- Wherever your head tag is located, add the new partial --> | |
<head> | |
{{ partial "google-fonts" . }} | |
</head> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
[params] | |
google_fonts = [ | |
["Fira Code", "400, 700"], | |
["Open Sans", "400, 400i, 700, 700i"] | |
] | |
heading_font = "Fira Code" | |
body_font = "Open Sans" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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 }} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@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!