GeneratePress

Customization Tips

Let's advance your theme's functionality.

Enable Google Fonts With CSS2

Google Fonts now supports a variable font system that uses CSS2 loading method. At the time of this publication (February 2022), this method isn’t supported by the current GeneratePress Typography system.

An additional step is required to enable variable fonts to work on your website.

1

On the left-hand side of the admin control panel, go to Appearance > Elements.

Appearance Elements v1

2

At the top, click on Add New Element.

Add New Element v1

3

From the dropdown menu, select Hook and click on Create.

Hook Create v2

4

Copy the code from the Google Fonts website, similar to the one shown here. In this example, I’m using the code to embed ‘Inter’ font onto my site.

Paste the code into where it’s indicated on the image.

Add a title called ‘Google Fonts’ or you can call it something else.

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800" rel="stylesheet">
Add Title Paste Code v2

5

Then, on the right-hand side, click on Publish.

Publish v1

Final Results

To ensure the font renders correctly, test out your website on different devices and browsers.

Google Font CSS2 Skool House v1

Leave a Reply