Adding Google Fonts to Volto Theme

Plone Support Customizing Plone
1

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.

2

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>
4

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:

image
image1604×334 70.9 KB

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

3 Likes
5

The theme/globals/site.variables approach used to work for me, however, since I switched to theme as addon my Google fonts aren't loading. I'm investigating now to try to figure out what's wrong.

  1. Does the theme/globals/site.variables need to be in the project folder and not the addon?
  2. Does the theme as addon approach just break the mechanism?

:thinking:

6

Not sure if this is best practice, but it did work.
I am inheriting from the volto-light-theme. So I added both the main.scss from volto-light-theme and the main.scss from my custom theme.

This is what the theme.js in my custom theme Iooks like:

import 'semantic-ui-less/semantic.less';
import '@plone/volto/../theme/themes/pastanaga/extras/extras.less';
import '@kitconcept/volto-light-theme/theme/main.scss';
import 'custom-volto-theme/theme/main.scss';

Now the src/theme/globals/site.variables is "obeying" again and using my custom font declaration as expected.