Implementing Google Web Fonts on Your LightCMS Websites

This is a guest post submitted by Denny Cave. Denny is the founder of LightIgnite, a valuable resource focused on helping LightCMS customers build amazing websites. With the power and flexibility of LightCMS, he has been exceeding customer expectations since 2008.

Years ago in times long forgotten, the web was a much uglier place — java applets here, flashing text there, animated GIFs everywhere, and lots of boring typography. Most of these problems were the result of poor taste or misguided content decisions and they have gradually disappeared as the collective consciousness has grown to despise them. However, one problem that has only recently been solved is the issue of lackluster typography. Read along to learn how to transform your headlines and body copy into unique works of art.

A Brief History of Fonts on the Web

When font tags (and later, CSS stylesheets) were introduced, a visitor had to have a specific font installed on their computer to be able to display text using that font. If they didn't, the web browser would render the text in its default font, which almost certainly resulted in a visual appearance undesirable to a site's developer.

As you can imagine, the list of web safe fonts (those that are installed by default in almost all operating systems and internet-enabled devices) is a small one. This led to the use of font stacks, which are essentially lists of reasonably similar fallback fonts used in the event that preferred fonts aren't available. The fonts in a stack still have to be present on the visitor's system, but being able to define several options gives the developer peace of mind that at least one of them will be available.

Font stacks are still used today. In a CSS file a typical font stack looks like this:

When CSS2 was released, techniques to allow font embedding finally began to emerge. Embedding allows fonts to be displayed even if they are not installed on the visitor's system. There are several ways to embed fonts, but the easiest by far is through the use of hosted font services. 

There are multiple reputable web font vendors out there, but we'll be using Google Web Fonts for this demonstration. It's extremely easy to use and, unlike many of the alternatives, it costs nothing.

Step 1: Choose Your Fonts

Before you embed fonts into your site, you need to browse Google's selection and pick the ones you want to use. Visit http://www.google.com/webfonts to start browsing. 

The type of font you pick depends on where it will be used in your site. Thick, bold fonts are great for headlines while thin, narrow fonts are generally better for body text. Fortunately, Google has included a nice interface that allows for filtering based on font properties. 

As you add fonts to your collection, they'll display in the bottom navigation panel. You can add as many fonts as you want to a page, but keep in mind that each font will slow the loading time of your site.

Step 2: Get the Code

In the bottom navigation bar, click the "Use" tab and Google will show you a summary of the fonts you've selected as well as their effect on page load time:

Scroll down a bit and you'll see the code snippet that has been generated for your selected font styles:

Step 3: Embed the Fonts on Your Site

Copy your code snippet and browse to your LightCMS site. You have two options for embedding the code:

  1. If you are comfortable editing HTML, the code can be inserted directly into your site template. Paste the snippet anywhere inside the head section of the template.
  2. If you don't know how to edit HTML, this code can be inserted site-wide using LightCMS's Google Analytics setting. This option is found on the Settings -> Advanced tab, then scroll down to Google Analytics:

Your site will now load the needed font resource files every time a page is visited. However, we still need to tell the browser the elements on which we want to activate the font.

Step 4: Apply the Fonts

This is the hardest part because it requires some CSS knowledge. We need to add the new fonts to the font-family attribute of the target elements on our site. If you're not comfortable editing your site's CSS files, you can make use of the Google Analytics setting again to insert the required code.

Since I chose a thicker font, I'll be applying it to the headings on the site. This is the code I'll insert into the Google Analytics setting on my LightCMS site:

That's all there is to it. Save the settings and preview any page on your site to see the headings in action. Here's how my demo turned out.

Go Forth and Beautify Your Typography

Now that you've seen the basics of implementing a web font I encourage you to branch out and find interesting ways to use your new found knowledge. Neat effects can be achieved by adding color or text shadows and by applying the fonts to different elements such as buttons or site navigation. Keep it tasteful but have fun!

1 comment (Add your own)

1. Ben Fjare wrote:
What a great article I'm sure many people will find great use out of. I would also recommend that anyone reading also look at Adobe's Typekit https://typekit.com/. Its not free like google web fonts but it has great choices for a slab serif, abstract type with style, or staples like Futura, Myriad, Garamond, or Trajan. I find it's worth the expense to you / your client. Its also included in the adobe cloud membership as well.

Tue, January 22, 2013 @ 11:14 AM

Add a New Comment

Enter the code you see below:
code
 

Comment Guidelines: No HTML is allowed. Off-topic or inappropriate comments will be edited or deleted. Thanks.

Tags

Archive

Try it yourself. It's free.

Takes less than 60 secondsNo commitmentNo payment information required

Sign Up for Free