I have been tweaking and modifying Moveable Type and WordPress themes for a long time, but until this latest TaB13 theme I have never done anything with custom fonts. After breaking the ice, though, I am really impressed with the way a custom font (or fonts) can significantly alter the look of a theme – here is one way to add custom fonts to your theme, using Google Web Fonts.
Google Web Fonts
Google Web Fonts is one of the easiest way to incorporate custom fonts into your theme. This route is easy because the font files are hosted on Google’s servers, requireing just a link to them in your blog’s <head> section and some additions to the style.css file.
For this example, I will use the same Yanone Kaffeesatz font that I am using on TaB13, along with a script-font called “Shadows Into Light Two” for just a few elements, like the widget titles and the “continue reading” link. Without question, one could certainly go overboard on font styles. Used judiciously, though, a font style can act just like a splash of color in directing a reader’s eye to a place on the page – such as the sidebar, in the case of the widget title.
Google makes it easy to get the link to their fonts – just click the “Quick-use” link and, if the font supports multiple weights, pick the specific weights that you want for your theme. For this example, I am using 300 for the main body text, 400 for bold text and 700 for post titles.
This link needs to be added to the <head> section, which can be done with a custom function, added to the functions.php file.
add_action('wp_head', 'child_google_fonts');
function child_google_fonts() {
echo "<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,300,700' rel='stylesheet' type='text/css'>";
echo "<link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light+Two' rel='stylesheet' type='text/css'>";
}Note that I am actually adding four font files, here. There are three Yanone Kaffeesatz files (300, 400 and 700) along with the “Shadows Into Light Two” font. All that needs to be done now is to incorporate these new fonts into the themes CSS via the style.css file.
Incorporate Fonts Into CSS
This example is using a Twenty Ten child theme, but the modifications will be similar for most WordPress themes. You can download a Twenty Ten child them incorporating these fonts here.
/* =Fonts
-------------------------------------------------------------- */
body,
input,
textarea,
.page-title span,
.pingback a.url {
font-family: Georgia, "Bitstream Charter", serif;
}In the Twenty Ten theme’s style.css file, you will find the font declarations in one section, under the “Fonts” remark (a “remark” is descriptive text between /* and */ tags).
body,
input,
textarea,
.page-title span,
.pingback a.url {
font-family: 'Yanone Kaffeesatz', sans-serif;
font-weight: 300;
}For my Twenty Ten child theme, I am simply going to copy the three major font declarations (I am not changing the “pre” and “code” declarations), change the font-family to my custom font and add a font-weight declaration because my font has three different options (300, 400 and 700).
As you can see, this only gets us part of the way there. Everything is a bit too small, so the next step is to tweak the font size and line spacing (the distance between each line of text).
#content, #content input, #content textarea {
font-size: 22px;
line-height: 28px;
}
That makes the main content look much better. As a general rule, I like the line spacing to be about 25% greater than the font size. The next step is to work on the post title.
#content .entry-title {
font-size: 32px;
font-weight: 700;
}
There we go. If you remember, one of the Yanone Kaffeesatz fonts that I am linking to is a “700″ weight, so by declaring that for the entry titles, the letter-spacing is much better than the previous bolded 300 weight font. Now for the widget text, which is still tiny.
body, input, textarea {
font-size: 16px;
line-height: 20px;
}
Some elements, like this widget text, will require some trial-and-error on the font size in order to get the right look. Just remember to change the line spacing also. With the major elements complete, I am going to turn my attention to a little “window dressing” with the script-style font.
.more-link {
font: 20px 'Shadows Into Light Two', cursive;
}
.widget-title {
font: 20px 'Shadows Into Light Two', cursive;
}
And there we have it – a simple Twenty Ten child theme with a fairly significant change in the overall look, simply with the addition of custom web fonts.
Great and SIMPLE way to do this without a plugin – thanks for posting, Roy!
I stopped using this method when I came across Lubith. Its a WP theme generator which has a great typography tool. It saves me a lot of time and effort in order to get the exact looking font that I want plus I don’t have to go to different places and make different actions in order to customize my WP theme. By using it I have all my editing options that I need.
I am glad that is working for you, Damian.