- AJAX-based Microsite: Google Fonts / FontAwesome

AJAX-based Microsite: Google Fonts / FontAwesome


Before moving onto activating jQuery on our websites, I would like to introduce two useful front-end libraries that may help your future projects. If you were part of the original CSDM 1N15 class, this should be a review for you.

Using Google Fonts

The challenge of using custom typefaces in websites is no longer relevant, as we now have a plethora of subscription-based services such as Typekit ( and ( As part of this exercise, we will focus on Google Fonts (

Enter the Google Fonts website, and choose the typefaces you wish to use as part of your microsite. The website features a shopping cart-like interface that allows you to view all the selected typeface and customize what variations should be imported into the microsite:

As the instructions suggest, we can simply copy the <link> tag and paste into the <head> section in order to start using the typefaces. We can use "font-family" to specify the typefaces we just imported into the website.

Using FontAwesome icons

Inserting icons into our code was traditionally a time-consuming process, where we were expected to create individual images via Photoshop and implement using <img> tag. Font Awesome's innovative approach allows us to use vector-based icons as if they were part of a typeface.

The website's "Get Started" page ( offers a copy-and-paste entry. Be sure to use the "free" version:

After successfully implementing the <link> tag, it is as simple as searching for an icon and copying the generated code:

Note that there is a HTML snippet that you can copy and paste into your microsite. You can also treat them as individual text characters and apply various text-specific CSS rules.

Screencast Recording