Meks
Typology knowledge base
Knowledge base / Typology / How to import and use additional Google Fonts

How to import and use additional Google Fonts

If you have already tried to find desired Google Font family and it is missing from the list inside Theme Options -> Typography , there is a workaround. Please follow the example below.

Step 1 – find the missing Google Font

Let’s say that you want to include “Alegreya” font. You will find it on following page on google web fonts: https://fonts.google.com/specimen/Alegreya.

Once you are there, just select this font as shown on the image below.

Step 2 – add it to additional CSS field inside the customizer

Once you have selected it, click on @import method and copy/paste middle line of it. See the picture below for better reference:

After that, navigate to Appearance -> Customize -> Additional CSS. and paste the following piece of code inside:

Step 3 – apply the font to the desired elements on the website

If you want to use this font as the main text font, just add this line into Appearance -> Customize -> Additional CSS field.

To use this font for headings, just add this line into Appearance -> Customize -> Additional CSS field.

Watch the complete process in this short video:

Was this article helpfull? Yes No
Need more help?
If you have any further questions, we are here for you.
Meks