How to use custom Google Fonts in Hugo [shortcode]

When I started using Hugo, I noticed that there are very few plugins or addons which make it easy for you to customise fonts and typography. Maybe you want to write a post of article and not use the default font that is set up in your CSS stylesheets - Maybe you avoid editing the CSS styles … so I created a shortcode for this. It’s a little bit of fun to brighten up your Hugo content.

Google Fonts is a great library of free fonts that you can use on your website (and download to use on your local machine).

Normally, you’d have to edit a bunch of files and write some code - but all you need to do is save this file to your Hugo site and then you can use it.

Shortcodes are saved to either of these locations

1. your /<Hugo project>/ Layouts / Shortcodes
2. your /<Hugo project>/ Theme / Theme Name / Layouts / Shortcodes

I prefer option 1 - in case you ever change the theme, you still have the shortcode

Install the Typography Shortcode

First we download the shortcode … then move the shortcode file to my preferred location

1
2
3

cd <your Hugo project>
git clone https://gist.github.com/8fd26c6fc0dc864ab2058487f2702c41.git 
mv 8fd26c6fc0dc864ab2058487f2702c41/typography.html layouts/shortcodes

Note: If you don’t have git / don’t want to use it - then go download this Gist and unzip / save it to your preferred location

How to Use

In markdown content the shortcode looks like ..

{{< typography font="font-family" size="36px" weight="bold" >}}
You are awesome. You're even better! 
{{< /typography >%}}

Note there are opening and closing parts to the shortcode.

As an example

{{< typography font="monoton" size="36px" weight="bold" >}}
You are awesome. 
You're even better! 
{{< /typography >%}}

Becomes …

Options

• Font - You can use any font on the Google Font site
• Size - you can px or pt
• Style - italic, oblique - if not used, then default is normal
• Weight - bold, lighter, etc - if not used, default is normal

If you liked this please STAR it on my Gist.

Sorry I can’t do this without mentioning German, Bold, Italic

Meet the author

Damien Saunders
An experienced management consultant and business leader interested in digital transformation, product centred design and scaled agile. If I'm not writing about living with UCTD (an autoimmune disease), I'm probably listening to music, reading a book or learning more about wine.
Find our more about me.