How I Added Custom Web Fonts to Genesis Child Theme

One of our WP Pro Business clients recently went through a redesign in anticipation for her book release. We moved her to the Genesis framework and implemented a customized version of the Crystal child theme.

She needed custom fonts on her site in order to match the design of her book cover. Here’s how we accomplished that goal.

The Goal

The original font for the site title and other areas being used was Arial, we needed to change that to the Typewriter Royal 200 web font provided by FontsForWeb.com.

Here’s the title before:

Before

Here’s the title after:

After

Setting Up the Change

FontsForWeb.com provides you with code that calls their font and it’s included CSS class. It’s required that you put this code into the header of your document.

<pre><style type="text/css">
    @font-face{
        font-family: "typewriterroyal200bold";
        src: url('http://fontsforweb.com/public/fonts/801/typewriterroyal200bold.eot');
        src: local("Typewriter Royal 200"), url('http://fontsforweb.com/public/fonts/801/typewriterroyal200bold.ttf') format("truetype");
    }
    .fontsforweb_fontid_801 {
        font-family: "typewriterroyal200bold";
    }
</style>

How To Include Header Scripts in Genesis?

Genesis makes it super easy and there are several ways to do it. We chose to simply include this script in the Genesis Header/Footer Scripts section of the Genesis Theme Settings.

1. Navigate to Genesis–>Theme Settings
2. Scroll down and on the bottom right you will see the Header/Footer Scripts section
3. Insert the FontsForWeb.com script
4. Choose Save Settings

The Header/Footer Scripts section should look like this:

Insert the fontsforweb Script

Note: Google also provides web fonts and this should work for them as well.

Filtering to Access CSS Font Styles

We had to include two functions in order to filter the CSS output of the site title and post titles in our Genesis child theme. We did this in order to include the fontsforweb CSS classes so we could style them accordingly.

We included the two functions below in our Crystal child theme’s functions.php file.

Our Function to Filter the Site Title

//Filter Site Title to Add Font Class
add_filter('genesis_seo_title', 'fontforweb_genesis_seo_title', 10, 3);
function fontforweb_genesis_seo_title($title, $inside, $wrap) {
 return sprintf('<%s id="title">%s</%s>', $wrap, $inside, $wrap);
}

Our Function to Filter the Post Titles

//Filter Post Title to Add Font Class
add_filter('genesis_post_title_output', 'fontforweb_post_title_output');
function fontforweb_post_title_output( $title ) {
 return sprintf( '<h2>%s</h2>', apply_filters( 'genesis_post_title_text', get_the_title() ) );
}

CSS Edits

We could have targeted the new

.fontsforweb_fontid_801

CSS class in the style.css file in our child theme , but because all we needed to define in our case was the actual font, that was already taken care of in the code we added to the Header/Footer section above.

Please Leave Us a Comment if You Found This Useful