How to Change Font Family in Gravity Forms

windows10Gravity Forms StylingLeave a Comment

Gravity Forms by default takes the font family of your theme. If you need to change gravity form font family from default to some other then there are two methods for it. I will explain both of them in detail here

Method 1:

Adding CSS styling

Method 2:

  • Using Style Builder Plugin (Recommended)

Steps to change font family by adding CSS

This method involves you to add custom CSS for your gravity form.  To target font family for we will need to add styling to form wrapper class.

  • Open WordPress dashboard and go to Appearence -> Editior .
  • In right sidebar you will see all the files of theme. We are looking for Stylesheet file. It is usually located at the bottom. Open this file (style.css)
  • The file will open in the editor. Scroll to the bottom of file and enter the following code

body #gform_wrapper_**form ID here**

{

Font-family: **Enter font family name here** ;

}

Replace **form ID here** with gravity form id . If you want to target all the forms then remove  _**form ID here**

Replace **Enter font family name here** with name of font you want to apply.

  • Click on update file button to save your changes.

Word of Caution:

You can break your theme styling if you break any CSS code in the style.css file. This method is only recommended only if are aware of CSS coding syntax.

Also all the form styling will be lost when you change theme. You will need to redo the steps again in new theme.

Steps to change font family with Style Builder for Gravity Forms

This is recommended method for changing font family. There are more than 130+ settings you can do in gravity forms without fear of breaking any code.

  • Download Style Builder by clicking here.
  • Now install and activate the plugin.
  • Navigate to Forms -> Style Builder

Style builder in submenu

  • Click on Add New buttonimage-2
  • In Style Builder select the Gravity Form you want to target. All your gravity forms will automatically appear in form ID dropdown menu.
  • Style builder comes with a wide selection of popular Google fonts. Select your desired font and click on publish button.

font family

  • Now again navigate to Forms -> Style Builder and copy the shortcode.

image-19

  • Use this shortcode in your post.

image-21

Even if you change WordPress theme the styling of your gravity form will not be lost.

Here is the video tutorial for changing font family

Leave a Reply

Your email address will not be published. Required fields are marked *