Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Using Google fonts and styles on your site

Friday, June 21st, 2013 by Servage

As a tutorial, this topic is relatively easy. For those with a familiarity with CSS syntax, it is a basic two-step process with options for stylizing the fonts. This article is aimed at those who may not be so versed in HTML and CSS, and who really want to use any of the 600+ fonts from Google on their own site.

In a previous article, we provided a most comprehensive overview of the user interface on the Google Fonts domain. And in that piece, we promised to review the “Use” portion as well as other areas that aid in implementing selected fonts on a site. The “Use” portion is actually too basic for full fledged article, while the “Getting Started” page, buried in the About section, provides sufficient information in getting the the most out of using these fonts.

Let us quickly revisit the Use section to get an idea on how simple implementation is. Of course, the information here is based on the idea that at least one font has already been selected.

  1. First, you simply choose the style of the typeface (i.e. bold, regular, italics). As noted on the right sidebar at the Google page, it is best to select only the styles you are sure to use. Otherwise, load time for your site can be decreased.
  2. Next, you select the character set (or script) you want with the font. Most of the fonts through Google use the Latin script, but there certainly will be cases where you may desire character sets for other languages. This is where you choose that, and again with the caveat that less selections mean faster page load times.
  3. Third step is for obtaining the HTML code that will be pasted into your site. Essentially, whatever font(s) you have chosen, plus first 2 steps above will be included in that code. As this step is one of the two most critical ones, it is item that we’ll cover further below. A key though in this section is to select among 3 instances of the code: Standard, @import and Javascript. For purposes of this article, we suggest selecting the Standard code.
  4. Final step is for obtaining the CSS style code. Again, we’ll explain this a bit more in section below, but this code is much easier to grasp than the above one.

 

For the rest of this article, we’ll explain the basic, intermediate and advanced steps that go with implementing Google Fonts on your website. The advanced isn’t really that complicated, but this article assumes the reader might need further explanation than what some web designers are likely very familiar with.

The Basics

Google Fonts reside on Google servers and are accessed via the Application Programming Interface (API). This means that users (you) don’t need to download any font nor upload it, in order for the font to work on your site. This further means that load time for your site files is lessened as your host server isn’t burdened by the added processing. Thus, the technical beauty of using Google Fonts.

As noted in the previous section, there are 2 primary steps for implementing Google Fonts on your site: pasting an HTML snippet that references the chosen typeface and amending the CSS element for which the font will be applied to. In the next 2 sections, we’ll go into more detail on this.

Two other basic items to remember:

  1. Adding a bunch of fonts and style options can slow down a site. It is suggested you add from Google Fonts only what you are sure you’ll actually use.
  2. Be sure to specify a fallback font. As not all browsers may support the fonts you selected, it is suggested you also include generic font types which will ensure your text content is rendered (or readable). The “Use” portion does this for you automatically, and is item we cover below.

 

Intermediate Items

When visitors come to your site, it is their browser that is actually connecting with the Google Fonts API to load up your content as you have chosen to stylize it. Therefore, it is helpful to realize which browsers are are compatible with Google Fonts. As Google started their web fonts collection in 2010, not all early versions of browsers are supported, and so a fallback font that the browser can default to, is important. Google notes that its Fonts API works with the majority of mobile operating systems, including Android 2.2+ and iOS 4.2+. Additionally, the following major browsers are supported: Chrome, Firefox, IE6+, Safari and Opera.

When a browser connects with the Fonts API, via the HTML snippet (link tag), the font is downloaded and cached in the user’s browser. Obviously, the more sites that make use of Google Fonts, the faster other sites that use those fonts will load. For browser-specific behavior, see this Google page for Technical Considerations.

Step 1: The link tag is the first item to add to your site. Below is non-usable sample of the HTML snippet code that gets added to a site.

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font Name”>

Note: We colorized the text in this sample to make it easier to understand the included elements. Colorized text is certainly not required for making use of a code snippet.

The HTML link tag is most often used to link to a stylesheet, hence the “relationship” attribute (rel=) above. The type attribute (for text/css) is technically not required for HTML5, but is good practice to include it. And the href attribute specifies the document that is being linked to (google fonts api). The reason this is not a usable code is because what comes after the /css in the above code is what will be served to the browser, which in this example is generic to aid in understanding how this code works.

The link tag is part of the HTML document in your site, and belongs within the head (or <head>) section of your site. Not to be confused with “header” on the front end, the head section is for elements of your site that are about your document, or site page.

Within the Google link, to the Fonts API, the information that comes after /css?family= is the items you will manipulate to access font types, styles and even effects.

Step 2: Selecting a typeface for the HTML snippet.

In the generic example above, you’ll notice a space between Font and Name. One very important thing to remember is that you cannot, at any point have a space between any text that you add after family=

So, when you are looking over the many typefaces (font families) at Google Fonts, you can include any that they have listed. And if it is more than one word to the name, then a plus (+) sign must be used where spaces would otherwise appear. Here are some samples of usable HTML snippets that work.

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family= Marmelad”>

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family= Freckle+Face”>

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family= PT+Sans+Caption”>

And in these sample snippets, we’re calling forth exactly one font in each case. Those would be:

  1. Marmelad
  2. Freckle Face
  3. PT Sans Caption

But let’s say you want more than one Google Font on your site, to take advantage of Font Pairings. Then, in that case, you put a pipe character (vertical line) between each font type. If, for example, you wanted Freckle Face and PT Sans Caption, the code would appear as follows:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family= Freckle+Face|PT+Sans+Caption”>

Again, it is important to not have any spaces in the code text to ensure both fonts are properly accessed.

Advanced Steps

Step 3: Requesting added styles within a font family (Optional)

Including this step, 4 of the next 5 steps are optional considerations. If you know you want the standard (or normal) format of a typeface and nothing more, then you can skip to the final step (#7).

Styles reference the weight of the type – as in light, normal, bold as well as option for italics. Most fonts on the Google domain have 4 to 6 styles, though it goes as high as 18 styles and as few as one. Weight of the typeface can be a bit tricky to understand if not familiar with it, but essentially most typefaces use “400” as the weight for their “normal” typeface, and then less than that, say 200, for light or more than that, say 700 for bold. Fortunately, when specifying this in the code, you can go with the simple word, i.e. bold or even more simply “b.”

If sticking with normal style, then nothing needs to change in the selection. If going with any other option, or adding options, then those must be specified by putting a colon after the font name, followed by the style designation. With more than one style for same font, you add commas between style type. Here are a few examples to help understand the options available here:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family= PT+Sans+Caption:bold”>

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family= PT+Sans+Caption:b”>

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family= PT+Sans+Caption:700”>

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family= Neuton:i”>

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family= Neuton:italic”>

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family= Neuton:italic,bold”>

First 3 samples above are all saying the same thing in different terms: requesting PT Sans Caption font with both normal and bold styles. Next 2 samples are both requesting Neuton font with normal and italic styles. And last sample is specifying normal, italic and bold styles for the Neuton font.

So, if we combine what we’ve learned so far, then we could have strings of code where we request multiple typefaces with various styles, as in:

<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family= Neuton:italic,bold|PT+Sans+Caption:bold|Roboto+Slab:book,bold”>

Three font styles requested for our site, with a total of 8 styles being requested (three, two and three).

Step 4: Requesting character subsets (Optional)

Character subsets are for font scripts that utilize more than one language. Most of the typefaces on Google Fonts stick to the Latin script, but some included additional scripts, which in some cases you may deem necessary.

To add an additional script, i.e. cyrillic, you add an ampersand (&) plus subset= after the font name, and/or after the font style. As in the following samples:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto+Slab&subset=cyrillic”>

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto+Slab:bold&subset=cyrillic”>

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto+Slab:bold&subset=latin,cyrillic”>

In the last sample above, you see we added 2 script types via a comma.

Step 5: Assigning font to specific word or text on a site page (Optional)

This step is for optimizing your font requests in instances where a specific text element on a page is what will be requesting that font type. This would be in cases for a logo, header or perhaps other large display type. In these instances, you add after the font name, &text= followed by the string of text to be altered. If more than one word, to ensure spaces are encoded correctly in the link, you can simply go with the unicode designation of %20. Hopefully the example below helps in understanding this:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto+Slab&text=Welcome%20To%20My%20Site”>

Therefore, if our header text is “Welcome To My Site” it will be optimized with the Roboto Slab font from Google Fonts API. And with this step, subset designation is not needed as the text request allows any character from the font set to be accessed.

Step 6: Font Decorations or Effects (Optional)

This is an option that you won’t find in the “Use” section of the Google Fonts domain as Google has deemed this beta. It works well, and if interested in adding a little pizzaz to your text, these effects offer a variety of options, such as: crackle, emboss, neon, fire and static, to name a few.

      

fter the font name, you add &effect= followed by the desired effect. Here are some examples of how that looks in code:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family= Neuton&effect=neon”>

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family= Neuton&effect=neon|emboss”>

In the second example, it is requesting 2 effects to be used. However, it is important to note that you cannot use more than one effect on a particular element, so the request for 2 or more effects is with the idea that they will be applied to different text elements on your site.

Use of font effects requires an additional step in which you add the corresponding class name to the HTML element. On the same page of the HTML document, you assign a text element the effect by placing the code “font-effect-(effect type)” to that section, minus parentheses. Here is an example with the emboss effect at work.

<div class=“font-effect-emboss”>I made this!<div>

With this addition, plus the link tag, the Neuton font with emboss effect will be applied to the text “I made this!” on the site.

For a list of the available font effects you can access through Google, see this link.

Step 7: Adjusting the Style element of your site

After the HTML link tag is situated, the CSS style sheet must be amended to ensure the font is applied to the element you wish to designate.

Code for this is relatively easy, as long as you understand how to manipulate CSS code. For your H1 elements to all obtain the requested Google Font, you simply add the following code

font-family: 'Font Name', serif;

With this sample above, the generic ‘Font Name’ is replaced by whatever you requested in the HTML snippet from Step 2. As it is not plausible to account for all selectors for multiple font requests, the sample serves as a basis from which you add simply the font-family and typeface that you wish to apply to elements desired on your site.

In the code example above, the ‘serif’ is added as default fallback font, which we noted in our Basics section above. This ensure that your text will be rendered in a similar, even if the user’s browser doesn’t support the Google font. As noted in the FAQ for Google Fonts, there are 5 generic fonts to consider using for fallback purposes.

As an alternative to adjusting CSS style sheets, you can do an inline style assignment for an element. Such that if you wanted the heading of, “Introduction to Our Content” which might be heading to a paragraph on your main page, you could use the following code:

<div style="font-family: ‘Freckle Face, cursive;”>Introduction to Our Content</div>

And that covers the instructions about adding Google fonts to your site, plus styling the typefaces with the available options through the Google Fonts API.

Relevant links

 

Using Google fonts and styles on your site, 3.5 out of 5 based on 4 ratings
Categories: Guides & Tutorials, Tips & Tricks

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.