Adding Google Fonts to Volto Theme

I need to add a custom google font to my Volto theme. The steps are not obvious for a sometimes user of React. Will place any notes here as I go.

you can import googlefonts from within a css file, if that is an option.

Also: it is possible to import the font within a style tag:

<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
</style>

Found it, and it is too easy!
Just add @fontName to a custom site.variables file.

According to the Volto Docs, once that @fontName is declared, if the name is a valid google font name, it will work in the background to make sure the correct google font gets used.
I tried it out by adding the following to theme > globals > site.variables (if you haven't created a theme/globals/site.variables file, you'll need to create one, starting with a blank one is fine).

@fontName : 'Lobster';

surely enough... I got this:

If you did not previously have a site.variables file you will need to stop yarn and start it again so that your changes are detected.

Take a look at the default theme 'site.variables' to see the code that makes this work: volto/site.variables at master · plone/volto · GitHub

Here's a direct link to the docs:
https://docs.voltocms.com/theming/custom-styling/#examples-changing-base-font

2 Likes

Plone Foundation Code of Conduct