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!
@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: