How To Dynamically Use Google Fonts In A Hugo Website

Credit: / stoned.io
stoned.io
Written by: Published by: Copyright holder: on
How To Dynamically Use Google Fonts In A Hugo Website Go to https://fonts.google.com/ and select the font you want to use. Click the + Sign A box will pop open, showing you how to use the font. Once you have picked out which font we want to use, we can edit our theme and make it use the fonts we want. We are going to use / as the project’s BASE_DIR.

stoned.io

Observing The Universe Within

How To Dynamically Use Google Fonts In A Hugo Website

How To Dynamically Use Google Fonts In A Hugo Website

Go to https://fonts.google.com/ and select the font you want to use.

Click the + Sign

A box will pop open, showing you how to use the font.

Once you have picked out which font we want to use, we can edit our theme and make it use the fonts we want. We are going to use / as the project’s BASE_DIR.

/config.toml

[params]
    fontbody = "Raleway"
    fontheading = "Corben"

This file contains my partial layout for the < head > section of stoned.io /themes/stoned.io/layouts/partial/head.html

<link href='//fonts.googleapis.com/css?family={{ .Site.Params.fontbody }}' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family={{ .Site.Params.fontheading }}' rel='stylesheet' type='text/css'>

If you are using another theme, or a CSS framework you might have other overriding font styles. So right before the < /head > closing tag, I would suggest putting a custom style tag and specify your font usage.

<style>
body {
    font-family: '{{ replace .Site.Params.fontbody "+" " "}}';
}

h1, h2, h3,
h4, h5, h6 {
    font-family: '{{ replace .Site.Params.fontheading "+" " "}}';
}
</style>

The reason why we are using

{{ replace .Site.Params.fontheading "+" " " }}

the replace function to replace any + sign with an empty space character, is because Google fonts specification uses + signs. So when you specify your fonts in config.toml, be sure to use the + signs and not spaces.

Source+Sans+Pro (this is the correct way to specify the font in config.toml)

This is the string that is used by Google for the < /head > tag, but for the stylesheet, you need to specify the font like this:

font-family: 'Source Sans Pro', sans-serif;

So we need to replace the + signs from “Source+Sans+Pro” with spaces. This is why the style tag is used.

I use the style tag right before the < /head > tag, so that this STYLE specification occurs last in the stylesheet cascade. This way, you can easily add all sorts of fonts. For example, you could add a custom font for the paragraph tag and/or another for the pre tag. Perhaps you’d like to use different fonts for diff sized headings? Easy. Just add the fonts you want to config.toml

/config.toml under the [params] and specify whatever Google fonts you want.

fontheading1 = ""
fontheading2 = ""

...

fontheading6 = ""

fontparagraph = ""
fontpre = ""

And now let’s configure the head section. You can even abstract this out into /theme/stoned.io/partial/google_fonts.html and then specify this in your /theme/stoned.io/partial/head.html to load the partial by doing

{{ partial "google_fonts.html" . }}
<style>

h1 {
    font-family: '{{ replace .Site.Params.fontheading1 "+" " "}}';
}
h2 {
    font-family: '{{ replace .Site.Params.fontheading2 "+" " "}}';
}
h3 {
    font-family: '{{ replace .Site.Params.fontheading3 "+" " "}}';
}
h4 {
    font-family: '{{ replace .Site.Params.fontheading4 "+" " "}}';
}
h5 {
    font-family: '{{ replace .Site.Params.fontheading5 "+" " "}}';
}
h6 {
    font-family: '{{ replace .Site.Params.fontheading6 "+" " "}}';
}

p {
    font-family: '{{ replace .Site.Params.fontparagraph "+" " "}}';
}
pre {
    font-family: '{{ replace .Site.Params.fontpre "+" " "}}';
}

</style>

You can also specify multiple Google Fonts in one line /themes/stoned.io/layouts/head.html

<link href='//fonts.googleapis.com/css?family={{ .Site.Params.fontbody }}|{{ .Site.Params.fontheading }}' rel='stylesheet' type='text/css'>

But I like to keep things separate for easy reading of the code.

Now all you have to do is change the font names in your config.toml and voila! Instantly you can stylize your entire Blog in a jiffy!

Feel free to play around w/ this idea and come up with whatever you want and don’t forget to share it with the community. :) Cheers folks! Happy developing. Hugo is fun! :)

My other Hugo Web-Development Articles: