Mike Rogers on a Snowmobile

How to use Google Web Fonts on Wufoo forms

Posted on

Wufoo is a great service which makes managing forms on a website pretty simple, unfortunately their font selection is fairly limited. Luckily there is a really quick way to get better fonts on Wufoo.

Firstly, create a Wufoo theme with a custom CSS file. You can achieve this by clicking "Themes" in the tabbed navigation, than selecting "Advanced" in the property select box and than putting a URL to a CSS file to which you have access to. Than click "Save Theme" & giving it a rememberable name.

Custom CSS file set up on Wufoo

Next find the font you want to use on Google Web Fonts, than click "Quick-use" than select the "@import" tab to receive the code to put into your CSS sheet. The @import CSS rule will be used to download the extra font.

Screenshot of the import option for a google font.

Put the code provided by Google Web Fonts into the top of your CSS file and voila, you can start using the font you selected on Wufoo forms.

I've set up an example Wufoo form, you can copy.

This was written by Mike Rogers, a freelance Ruby on Rails developer based in London.

Share the ♥ by sharing this!

If you want to discuss this post, feel free to tweet me (@MikeRogers0) or drop me an email. Any code samples unless stated otherwise are licensed under the The MIT License (MIT). Spotted a mistake? Send me a pull request :)