Skip to content

Instantly share code, notes, and snippets.

@Maharramoff

Maharramoff/baseof.html

Forked from jeremybise/baseof.html
Created January 9, 2020 16:14
Show Gist options
  • Save Maharramoff/b869d2d87068769515700eb106a46de6 to your computer and use it in GitHub Desktop.
Save Maharramoff/b869d2d87068769515700eb106a46de6 to your computer and use it in GitHub Desktop.
Download ZIP
Google Fonts via config with Hugo
Raw
baseof.html
<!-- Wherever your head tag is located, add the new partial -->
<head>
{{ partial "google-fonts" . }}
</head>
Raw
config.toml
[params]
google_fonts = [
["Fira Code", "400, 700"],
["Open Sans", "400, 400i, 700, 700i"]
]
heading_font = "Fira Code"
body_font = "Open Sans"
Raw
google-fonts.html
<!-- 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 }}
Raw
stylesheet.scss
/* 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