How to Embed a Font in a Survey

Last Updated: 15 Jan 2015Hits: 4379
I have a client that absolutely, positively wants certain parts of their survey to be in a cursive/handwritten font. I was going to use a graphic made with the cursive font, but it isn't scalable and really doesn't look very good. Rather than the standard old fonts, like Helvetica, Times, serif, etc., can I use a different font?

Yes, you may use non-standard fonts in your surveys. As you probably know, the display of your survey may vary depending on which font the user has installed on their computers, which is why we tend to use standard, non-descript fonts. But, the world is constantly changing and, provided your surveys will be conducted via the Internet, you can now take advantage of a new technology called "web fonts." Google is one of the providers of this service, which you can learn more about here: 

http://www.google.com/webfonts

Basically, all you have to do is use their API to choose from more than 500 fonts and insert a little code into your survey. For example, I went to the link above and selected a web font called Butterfly Kids. I'll add the following line of code into the Survey Settings>Headers and Footers>HTML Head section so it will be available throughout my survey.

<link href='http://fonts.googleapis.com/css?family=Butterfly+Kids' rel='stylesheet' type='text/css'>

Next, we just need to add that font to our CSS styles definition. In this case, I want to use it on any text that I've wrapped in a <p> tag. Also, in the Survey Settings>Headers and Footers>HTML Head section, I'll add the following CSS style modification:

<style type="text/css">

<p {font-family: 'Butterfly Kids', cursive;}">

</style">

Now anything that is encased in a <p> tag will appear in the Butterfly Kids font. If I want that font to be used throughout the survey, then I would just change the "p" to "body", for example:

<style type="text/css">

<body {font-family: 'Butterfly Kids', cursive;}>

</style>

I could also add a text-shadow element to the web font to give it a drop shadow. Unfortunately, some browsers may not render this the way you expect, so please test it out before using.

<style type="text/css">

<body {font-family: 'Butterfly Kids', cursive; text-shadow: 4px 4px 4px #aaa;}>

</style>

With all of that said, please allow me to climb up on my soapbox for a sec and offer a piece of advice. I've spent a quarter century in the print and web design business, and one thing you need to be very cautious with is the use of fonts. Just because you can have lots of fonts, doesn't mean you should. One or two is plenty. Also, make sure they are easy to read. Many cursive and display fonts are so stylized that they become difficult to read and may screen-out potential respondents. So please be conservative and judicious with your font usage.