Using Google Fonts

With Google Fonts you can create a form with a unique look. We do offer a few different font options but Google Fonts offers many other options that are also free. 

What you would want to do is go to Google Fonts and find the font that matches the look you want. When you find the font you want to use from their list of fonts you would click on the "+" symbol on the upper right hand of the selected font. Once the "+" is clicked you will notice a grey box comes up at the bottom of the page, this will show the font you chose then just click on the grey box to open up the window for the selected font. 

 

On that window, you'll see "EMBED" and "CUSTOMIZE" tab. With "CUSTOMIZE", you will be given the option depending on the font to select Languages and to choose how it looks, different fonts offer different options that might be larger sizes, bold, italics, etc. Just make sure the options you want have a check next to them. Once done selecting how your font would look like, go to the "Embed" tab and copy the URL that appears, in our test case it will look like this: 

<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">

From here you will go to your form and add an embed field to the form and paste in the URL we just copied, this provides the form with the information to pull in the font.

Note: When using the embed code you would need to add a piece of text before or after it with at least one character (like a period) to make sure the code sticks.

Once you have the embed code in you would next need to edit the CSS for the form. For information on how to edit the CSS click here 

In the "Advanced Code Editor" you would click on the fields of text you would like to edit and paste in the CSS code that is provided in step 4 of the Google font page, in this example it would be:

font-family: 'Indie Flower', cursive;​

​After you add in the CSS you can see how it looks by clicking on "preview" in the upper right corner of the builder. When you do this you should be able to see all the font changes and if you missed a field you will be able to see there.

 

Was this article helpful?
1 out of 1 found this helpful

Comments

0 comments

Please sign in to leave a comment.