Tutorial: Fun with Custom Fonts

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.

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

<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 test drive FormAssembly for yourself at the link below! It’s free for 14 days, no credit card required.