AJAX-based Microsite: Google Fonts / FontAwesome
Introduction
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 (https://typekit.com/) and Fonts.com (https://www.fonts.com/). As part of this exercise, we will focus on Google Fonts (https://fonts.google.com/).
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
Addendum
As of February 2023, FontAwesome introduced mandatory user registration, forcing all users to sign up for an account in order to integrate free-to-use icons into their websites. While highly recommended to use your own email to customize and manage icon sets, you can also use temporary mailbox services such as Mailinator (https://mailinator.com/) to avoid sharing your personal emails.
The following screencast recording illustrates the latest workflow for gaining access to the copy-and-paste code offered by Font Awesome: https://www.dropbox.com/scl/fi/cgnuofs98o7mlwuco896w/Week-3-Addendum-FontAwesome-Kit.mov?rlkey=ieho01v0skfllbwd2cz02bzct&dl=0
Original instructions
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 (https://fontawesome.com/get-started) 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
https://www.dropbox.com/scl/fi/rr7uerxnlldxfdc5djypw/Page-3.mov?rlkey=xl9zdatv1rb5ykxdqjm2w6am6&dl=0