Overview

In this step-by-step tutorial, we will explore how to change the font family for the Gravity Forms Form using the Gravity Booster plugin. It is a free no-code solution for styling Gravity Forms. You can choose from 800+ font families and all your changes will be live previewed.

By the end of this article you will be able to easily change font family for any form as well as an added bonus you will also get code snippets to change font family for only particular parts of form like labels or inputs etc.

Benefits of Using Gravity Booster

Gravity Booster is your ultimate styling solution for Gravity Forms. It has 100+ styling controls for different parts of the forms like titles, labels, inputs, textarea, form wrappers, checkboxes, radios, confirmation messages, etc. 

The plugin is easy to use and has add-ons like Material Design, Checkbox & Radio Styler, Tooltips, Custom Themes, Field Icons, and Bootstrap that take the design to a whole new level. With an intuitive interface and the ability to live preview all the changes, this plugin is the best styler for Gravity Forms.

All the design changes you make work great on any theme or page builder be it Divi, Astra, Elementor, Beaver builder, etc.

Getting Started

Before we can change the font family for the form we need to install and activate the Gravity Booster plugin. The plugin is part of the official WordPress plugin repository and can be easily downloaded from your website’s backend.

Steps to Install and Activate Gravity Booster

Login into your website’s backend and then go to Plugins -> Add New.
Search for Gravity Booster and then install and activate the plugin.

You can also download the plugin by clicking here. After downloading, unzip the folder and then upload it to your website’s plugin directory using FTP tools like Filezilla or WinSCP.

Steps to Change Font Family for Gravity Forms

Gravity Booster lets you change the font family of your form with a few simple clicks. Follow the step-by-step guide below

• From your website’s backend navigate to Forms -> Booster.
• Select the form for which you want to change the font family. After form selection, the page will reload automatically.
• Form styling sections will be displayed on the left and preview on the right. Go to the Form Wrapper section. This section contains all the settings that can be done for the form container. Here you will see the Font Family option.
• Select the font family of your choice. You can also search for the available font families.
• After you select a font family then it will get applied immediately in the preview. This will help you decide if it looks good or not.
• Once you are happy with the changes then click on the Save button to make your changes live in the frontend.

Advanced Details

If you are interested in knowing how this plugin changed the font family then here is the explanation. When you select any of the available fonts, it will automatically insert code to fetch the font from Google Fonts. In this way, it won’t load all the fonts but just the one you need for your form.

Once the font is loaded in CSS then it will be added to the ‘gform_wrapper‘ class. By using this technique it won’t slow down your site.

Change Font Family of a Particular Form Element

The font family change you make with Gravity Booster applies to all parts of the form be it label, sublabel, form title, form description, etc. However, if you want to change the font family of a particular part only then it has to be done with custom CSS.

The following code snippet will change the font family for all the labels of the form to ‘Arial’.

Note: change FORMID to your form’s ID for which you want to change the font family.

If you want to use a custom font that is not part of your theme then you will need to upload it first before using it. You can check this guide for uploading custom fonts into WordPress.

If you still don’t understand any step then leave a comment and I will solve your query.