The Wufoo Blog

Fun with Fantastic Fonts!

By Jen Bjers · July 18th, 2013

Fonts are an amazingly powerful component of web design. When creating your forms in Wufoo, fonts are key in communicating a design aesthetic and defining your brand. Really, fonts are just an awesome way to express yourself, whether it be for company/product branding or just for fun. So consider adding a creative touch to your form with some truly tantalizing typography because we offer several options for customizing the font on that awesome form of yours.

Today, you’ll learn how to apply custom Google Fonts to your Wufoo form via the Wufoo Theme Designer like a champ.

Ready? Good, let’s get started.

➢ Choose from over 150 fonts from the Wufoo Font Picker.

➢ If you have a Typekit account, then you’ll be able to integrate with a library of fonts.

➢ Custom fonts can be applied via custom CSS. We’ll look at Google Fonts which allow you free access to nearly 630 fantastic fonts. We’ll use Google Drive to host our custom CSS file. This is a great alternative for any of you that don’t currently have a host solution.

I’m planning a family trip to Walley World and I’d like to get an idea of how many of my family members are planning to attend. This is going to be an epic adventure so I’d like my RSVP form to be epic as well. What better way than to imply epicness than to do it with typography?

So, here’s a basic Wufoo RSVP form just as an example. Super simple and gets the job done. However, with a little custom font and color magic you can really spice it up—check it out.

How’d I do it?

  1. Locate a font to use from Google Fonts, then click on the arrow button in the bottom right corner.

  2. Select the @import tab and copy the @import URL.

  3. Open Notepad and add the @import URL to the top of the document followed by the CSS rule for customizing the form font. Save your Notepad file as ‘style.css’.

  1. Upload to your Google Drive.

  2. Click on the Share link to set the Privacy to Public.

  3. Copy the public URL to a Notepad.

  4. Update the URL with the correct Google Drive format of https://googledrive.com/host/file-code

  5. Head to the Wufoo Theme Designer – Click on Advanced – Paste in your Google Drive hosted CSS file.

  6. Be sure to Save Theme. Bam, you’re done.

There you have it, folks. Now get out there and have some fun with those fonts.

Don’t be shy either—leave your questions or comments below!

This entry was posted 1 year ago and was filed under Tips & Tricks. Comments are currently closed.

Comments

  1. how do you do custom fonts via the wordpress plugin? - Next tutorial perhaps?

    Posted 11 months ago by Franz Pouchet.
  2. I’m having trouble with the link for Google Fonts under “How’d I Do It” step 1. Could you please check it out?

    Posted 11 months ago by Michelle.
  3. Hi Michelle! We’d be happy to help. Could you send a note to support@wufoo.com and our team will take a look for you? Thanks.

    Posted 11 months ago by Kayte Korwitts.
  4. That Chunk font looks pretty cool IMHO!!!

    Posted 11 months ago by Christine Derrel.
  5. Thanks for this tutorial! Easy and useful!

    Posted 11 months ago by OjoSolutions - Website Design Bath.
  6. The above steps are no longer working. Can you please confirm ?

    Posted 9 months ago by Dave.
  7. Everyone needs a hug.

    Posted 9 months ago by ziad amr.
  • Search

  • About

    The Wufoo Blog is the official online publication written by the developers of Wufoo about their online form builder, form-related technologies, and whatever else may fit their fancy—like robots.

  • Archives