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.
Image may be NSFW.
Clik here to view.
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
Image may be NSFW.
Clik here to view.
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
@importrule.@importis 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.
This post is by Kurt Maine at The CSS Blog
Importing and Embedding Fonts using CSS3 and Google Web Fonts