Tutorial: Fun with Custom Fonts

You can pick between 12 different preloaded fonts in our Theme Editor, but you’re not just confined to those options. If you want to use a specific font to achieve a unique look, you can easily do that using custom code.

1. Pick Your Font

There’s a wealth of webfonts out there. Some resources include Google Fonts and Adobe Edge Web Fonts, both of which offer options ranging from formal to whimsical to edgy.

For this example we’re going to use Abril Fatface, available on Google Fonts.

2. Grab the Embed Code

Google Webfonts makes it easy to generate a ready-to-use embed code. For these purposes, we’ll copy the standard code link.

3. Add the Code to FormAssembly

Open your form in the Form Builder. For this example, we created a simple newsletter signup form. This form uses the Sky theme from the Theme Editor, with a few customizations to the color pallette and title size.

As is, the form is attractive, but basic.

To change the title of the form to Abril Fatface, go to Properties > Custom Code.

Paste the stylesheet code into the Custom Code box. This is the code we used for Abril Fatface.

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

Then copy and paste this bit, too:

<style type="text/css">
.wForm, .wFormTitle {
font-family: 'Abril Fatface', cursive; }
</style>

If you picked a different font, change Abril Fatface to the name of your font. Keep the cursive—it tells the browser to show the default cursive font if something goes awry. Click outside of the code box to apply the change, and click save if you’re happy with how it looks.

As a final step, we chose to change the other fonts in the form using the available options in the Theme Editor. We opted for Open Sans because the sans serif font pairs nicely with the whimsical, serif style of Abril Fatface.

Here’s how those fonts look together in our updated form.

CSS allows you to do a lot of creative and useful things with your forms. Read up on other common custom code scenarios in our knowledge base and learn more about web form design in our eBook!