For those of you who are new to web design, you might be wondering how to use decorated or scripted fonts in a quick and easy way. The old fashioned web designer might tell you to open photoshop and create a clean jpeg. While this is a useful way, it requires more load time, and uploading of images. As well, what if you have a lot of text on multiple pages? Then this gets a lot more technical. Well you’ll be glad to know, annoying jpegs and over technical scripts to embed odd fonts are a thing of the past. Let’s look at an alternative way to do this using css and javascript.
My favorite way to use odd fonts is by utilizing google’s new web font api. Google builds great tools don’t they?
Take the example below. It required a few simple steps.
Javascript code (figure 1):
.ScriptFont{
font-family: 'Miniver', cursive;
}
Google's web font api
The result is not only SEO friendly and searchable, it’s also more crisp in appearance because it is live text!
Google’s web font api