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.

1. Search Google’s WebFont Library for  a particular style you like. 
2. Click the “Use” button on the bottom tab
3. Copy the javascript code (example below figure 1) and place it in the head section of your website. 
4. Add a css class in your stylesheeet, copying google’s style code to use in your css class for the font-family attribute (example below figure 2)
5. Use the css by applying a class to some text (example below figure 3)

Javascript code (figure 1):

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

Leave a Comment

Name

Mail (will not be published)

Website

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.