With the beta API now available, Google Web Fonts is becoming an excellence source to find and easily import fonts. The directory contains over 250 Open Source Latin fonts. Using CSS or Javascript you can import and embed any of these fonts on your Web site or WordPress installation.

CSS3 Importing Google Web Fonts

I’ll walk you through how-to import a font and have it displaying on your Web site in less that 5 minutes!

Step 1. Select your Font from Google Web Fonts

Browse through the Google Web Fonts library and find a font that you’d like to include on your Web site. Something that you’ll want to keep in mind when making your selection is that if you require special styles (Bold or Italic, for example) then you’ll need to find a font that includes those variations. Below the name of the font you can see the number of styles included. Alternatively, you can actually sort by number of styles so you can browse only the fonts that have several variations.

Once you’ve found the font you wish to use, you can either add it to your collection so that you can keep a library of the fonts and their sources, or skip the collection and simply choose “Quick-use”.

Choose Font Styles

On the Quick-use page you’ll be presented with the option to include any additional styles that font has. For the sake of demonstration, I’m going to choose all three of Judson’s styles – normal, italic, and bold, despite the high level I’m seeing on Google’s Page Load scale.

Note: Do not select any fonts or font-styles that you aren’t sure that you’ll use. Fonts are relatively large files, and the more styles you select the longer the load time will be.

Step 2: Importing the Font to your Web site

While still on the Quick-use or collection page, scroll down until you see the section on importing. You’ll be presented with three options:

Standard
In Google Web Fonts, the Standard method imports fonts using the <style> tag. Use this method unless you have a specific reason not to.
@import
In Google Web Fonts, the @import method the font using the CSS @import rule. @import is not supported by some older browser versions, and it has also been shown the be less efficient than using the <style> tag to include stylesheets.
Javascript
In Google Web Fonts, the Javascript method imports your fonts using Google’s Web Fonts Javascript API.

In this instance, I’m going to select the Standard method with the link tag, which gives me the following link:

<link href='http://fonts.googleapis.com/css?family=Judson:400,400italic,700' rel='stylesheet' type='text/css''>

Copy the link tag that Google has generated for your font selection and paste it between your site’s <head> tags directly before or after the other link elements, which for WordPress users, will be located in you theme’s header.php file (wp-content/themes/theme-name/header.php).

After you’ve pasted the link element, open your stylesheet. You’re going to have to decide where you’d like the font to show up. You generally don’t want to use an imported font for all of the font on your Web site because that could cause poor performance. In this case, we’re going to style all of our heading elements, which in WordPress are used to display post and page titles.

Add the following rule to your stylesheet:

h1, h2, h3, h4, h5, h6 {
	font-family: 'Judson', Arial;
	/* Place your font name in single quotes
	   and declare a font to fall back on */
	font-weight: 400;
	/* Although 400 is usually the default
	   font weight, it can't hurt to make
	   sure that it's correct */
}

Now we need to create a rule so that we can use the italic and bold styles as well.

.headingItalic {
	font-style: italic;
	font-weight: 400;
}

.headingBold {
	font-weight: 700;
}

That’s it – All of our heading elements should be showing up in the font you just imported. You can add the .headingItalic or .headingBold classes to any of the headings you’d like to style differently.

If you’d like to style elements other than headings, just replace the list of elements in the first bit of CSS with those elements you wish to use your custom font.

POSTED BY
POSTED IN Tutorials
DISCUSSION 7 Comments

7 Responses to : Importing and Embedding Fonts using CSS3 and Google Web Fonts

  1. Erna says:

    Thanks for taking the time to describe the terminology for the noobs! ;)

  2. DiAbLo says:

    This is exactly what I needed, thanks for explaining the difference between @import vs standard.

  3. Jerrold says:

    thanks for the tutorial on importing fonts using CSS, keep up the good work

  4. Bosher says:

    Perfect, this is exactly what I needed. I kept wondering whether I should use @import or the style tag to embed the fonts from Google Web Fonts – thanks for answering it in your post.

  5. Byron Craig says:

    Thank you for the explanation on the topic, I just started using my first imported fonts.

  6. Carlos Ortega says:

    Cool guide, it made things really easy. Thanks for taking the time to explain Google Web Fonts and the different import types, I’ve been using it for awhile and always wondered what the differences were.

    Definitely the best GWF tutorial I’ve seen :)

  7. Toma Strevel says:

    I really appreciate this post. I’ve been looking everywhere for a good Google Web Fonts tutorial! Thank goodness I found it on Bing. You have made my day! Thank you again!