No results found. Try again with different words?

Search must be at least 3 characters.

How to Add Custom/Google Fonts?

Do you want to make your website look better? Adding custom or Google fonts can help you achieve a unique and personalized design. In this guide, we’ll show you how to easily integrate these fonts using the Spectra plugin. Whether you’re a web developer, designer, or just someone who wants to improve their online presence, you’ll find step-by-step instructions for adding custom or Google fonts. Let’s get started and explore the exciting world of typography!


Please note that Google Fonts are offered by the Spectra plugin and in order to have Google Fonts on your website, you will need to have the Spectra plugin installed on your website.

What are Google fonts?

Let’s understand what Google fonts are and what they do. Google Fonts is a collection of 1,364 font families that are all free to use. For typical tasks and items, the collection also offers entertaining and wonderfully made icons. 

Though the collection is huge, to maintain the uniformity of the typography throughout the website, we use only a few of them. While these wide ranges of fonts give you a huge opportunity of making your site beautiful; however, at the same time, make it load slower. This is the reason why we have decided to give the users to choose the font that they would like to load on their website.

How to Add Custom/Google fonts using the Spectra plugin

Spectra offers 1500+ Google font options. You can select which you want to use in your FSE Typography.

Step 1: From the WordPress Dashboard, navigate to Spectra > Dashboard

Step 2: Choose Settings from the top navigation bar

Step 3: Click on Theme Fonts and enable the option “Font Families”.

Step 4: Click on the arrow to open the dropdown menu and select the font, font style, and font-weight that you would like to use on your site.

Step 5: Click on Add Google Font option.

Step 6: Now navigate to Appearance > Editor. 

Step 7: Choose the Styles tab and click on Typography.

Step 8: Click on typography settings for different elements to see the previously added font family in the spectra dashboard. 

Step 8: Select the newly added custom/google font and click on the Save option. 

Was this article helpful?

Did not find a solution? We are here to help you succeed.

Related Docs
Build Ultra High Performance
Websites, Without Coding

Whether you are a beginner, marketer, or professional, Spectra has the tools and resources you can rely on to succeed

Get Notified When Available

Note - You can purchase the Essential Toolkit now and easily upgrade to the Business Toolkit once it becomes available.

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Get your hands on Spectra Pro

Enter your name and email address to get access to Spectra Pro.