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.
2
At the top, click on Add New Element.
3
From the dropdown menu, select Hook and click on Create.
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">
5
Then, on the right-hand side, click on Publish.
Final Results
To ensure the font renders correctly, test out your website on different devices and browsers.
