Using Fancy Fonts

One of the most common reasons to edit the styles in a template is to change an
element’s font. In fact, it’s often the case that all you need to do to turn a popular
theme into something uniquely yours is to change some of the typefaces.
Originally, HTML pages were limited to a set of web-safe fonts. These are the typefaces
every web surfer has seen, including stalwarts like Times New Roman, Arial,
and Verdana. But web design has taken great strides forward in recent years with a
CSS feature called embedded fonts. Essentially, embedded fonts let you use almost
any typeface you want on your web pages—you just need to upload the font to your
web server in the right format.
The embedded fonts feature has a few quirks. First, it doesn’t work with older browsers,
so you need to make sure your pages look respectable even if your visitor’s
browser can’t load the embedded fonts. Second, although every modern browser
supports embedded fonts, they don’t all understand the same font files. For that
reason, web designers often have to upload several copies of the fonts they want to
use, each one in a different format. And, third, the CSS rule you write to use embedded
fonts is a bit convoluted, which can make for a few unnecessary headaches.
Happily, you can sidestep all these problems by using a web font service like Google
Web Fonts. There, you can pick from a huge gallery of attractive typefaces. When you
find a font you want, Google spits out the CSS style rule for you. Best of all, Google
hosts the font files on its high-powered web servers, in all the required formats, so
you don’t need to upload anything to your site.

TIP If you want to learn everything there is to know about web fonts, including how to host them on your
website, write the CSS rules yourself, and web-ify your own fonts, check out HTML5: The Missing Manual (O’Reilly),
which has a section all about embedded fonts.

注:中文嵌入字体有中国公司提供。Google 在中国行不通。

To use a Google font on a WordPress site, follow these steps:
1. Go to http://www.google.com/fonts.
Google displays a long list of fonts (Figure 13-11). At the time of this writing,
there were well over 500 typefaces to choose from.
2. When you see a font you like, click the “Pop out” button to take a closer look.
Google opens a font preview page that shows the font at different sizes.

3. If you like the font, click the “Quick use” button.
Google shows you a page with information on how to use the font. It consists
of a style sheet link (which you must add to your web page) and an example of
a style sheet rule that uses the font.
TIP Google also lets you choose your favorite fonts from its site and put them in a personalized collection. If
you do, Google gives you a few added features, like the ability to download a copy of the font to install on your
computer for print work. Google also remembers the fonts you store in your collection when you return to the
Google Web Fonts site.
4. Scroll down the page until you find the blue set of tabs with the caption “Add
this code your website” (Figure 13-12). Click the @import tab.
Google has created a ready-made style sheet for every font on its site. To use
the font, you need to link that style sheet to your web page, or import Google’s
style sheet into your style sheet (that’s the style.css file in the child theme). With
WordPress, the second approach is easier.

5. Copy the @import line and then paste it into your style.css file.
Put it right after the @import line for the standard Twenty Twelve styles.
TIP If you use several embedded fonts, you can add more than one @import command. However, there’s
a slightly more efficient approach—if you create a font collection, Google gives you a single @import line that
grants you use of all the fonts you picked.
6. Create a style that uses the font.
Once you import the Google style sheet, you can use your new font, by name,
wherever you want. Just set the font-family property, as you would with a normal
web-safe font. But remember to add a true web-safe font name after it as
a fallback, in case you’re dealing with an old-school browser that can’t display
embedded fonts or can’t download the font file.

Here’s a complete style.css file that uses this technique. The newly added parts
are highlighted in bold.

/*
Theme Name: Twenty Twelve Reboot
Description: This is a customized version of the Twenty Twelve Theme for the
Magic Tea House.
Author: Katya Greenview
Template: twentytwelve
*/
@import url(“../twentytwelve/style.css”);
@import url(http://fonts.googleapis.com/css?family=Bonbon);
.entry-header .entry-title {
font-family: ‘Bonbon’, ‘Times New Roman’;
font-size: 30px;
}

Advertisements
Using Fancy Fonts

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s