How do I add Google Fonts

Everything you need to know about typography in Matrix themes. This post explains how to customize a simple text, headings and font style of a specific element of your website.

You will find the most common issues with Google Fonts and how to host them on your own website.

All Matrix themes by default are using the system font stack and it's set up in your CSS:

If you remove it, your global text and headings will be using the default Jimdo fonts you can edit in

Design> Font Settings

In this section you can also edit the following elements of your website:

Font size: you setup the global size of your text and headings.
It is recommended to use:

• 15px for the text
• 30px for the heading H1
• 25px for the heading H2
• 20px for the heading H3

Colors: you setup the global colors for your text, headings and links
Text alignment: you setup the global text alignment for your headings.
Horizontal line: the color of horizontal line in content area
 

It is not recommended to use Google Fonts in Font Settings.

If you remove a part of system font stack in CSS, you can add the Google fonts for your global text and headings in Font Settings with the following limitations:

• limited Google fonts library
• limited font styles (font weight)
• the selected font can be used only for the global text and the headings. You can't use it for a specific element of your website ( e.g. navigation )

In Matrix Themes menu navigate Quick Setup> Google fonts select one of the preset Google fonts and paste it to Edit Head

Now opening the style editor, you add the class g-font  for the whole website if you select 'template configurations'  or a specific element that will be using the google font.

The Style Editor allows you to use the additional helper classes for the navigation, headings and the buttons:

weight-400, weight-500 etc -  font weight

is-uppercase - text-transform:uppercase;

is-letterspace-1, is-letterspace-2, is-letterspace-3

m-text-20, m-text-25 etc -  the font size for mobile devices ( doesn't work for inline styles)

Here's a step by step tutorial about how to add a new google font to your Jimdo website: