October 31, 2014

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:

Using a Web Font API in Genesis Child Theme

Before

Here’s the title after:

How to Include Web Font in WordPress themes

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:

Inserting Header and Footer Scripts in StudioPress Genesis Themes

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

WP Modder runs on the Genesis Framework

Genesis Framework

Genesis empowers you to quickly and easily build incredible websites with WordPress. Whether you're a novice or advanced developer, Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go. It's that simple - start using Genesis now!

Take advantage of the 6 default layout options, comprehensive SEO settings, rock-solid security, flexible theme options, cool custom widgets, custom design hooks, and a huge selection of child themes ("skins") that make your site look the way you want it to. With automatic theme updates and world-class support included, Genesis is the smart choice for your WordPress website or blog.

It's so damn good, I've redesigned all of my sites using Genesis and can confidently recommended it to you here.

Want an Awesome Host? We Recommend HostGator

HostGator for WordPress

Since its establishment in 2002, HostGator has been a world-leading provider of web hosting service. Although their office is in Houston, Texas, they provide top-notch service to clients and developers from over 200 countries internationally with a staff of over 600 employees. They offer Shared, Reseller, VPS, and Dedicated server packages for both beginners and professionals alike.

Each of their shared Web Hosting plans includes 24/7/365 support, a 99.9% uptime guarantee, and a 45-day money-back guarantee. If you would like to learn more, please visit their company page.

I use HostGator for the majority of my own sites and I continually recommend them to my clients. Learn more about HostGator now!

Get our FREE WP Topics Newsletter

The WP Topics newsletter is delivered twice monthly and it's jam packed with information on our WordPress People interviews, WordPress tutorials, new and useful plugins, themes, marketing techniques, and more.

We Respect Your Privacy.

tutorials delivered by email
* indicates required

About Adam W. Warner

I’m a web development consultant and instructor specializing in the use of WordPress and WordPress Multisite.My development philosophy focuses on solutions, education, empowerment, and support for my clients. I will provide you the tools to achieve your project goals, and I will show you how to use those tools.

Comments

  1. Learn: How I Added Custom Web Fonts to Genesis Child Theme http://wpmodder.com/how-i-added-custom-web-fonts-to-genesis-child-theme-1184.html

  2. RT @wpmodder: How I Added Custom Web Fonts to Genesis Child Theme #wordpress http://tiny.ly/XfUe

  3. How I Added Custom Web Fonts to Genesis Child Theme #WordPress http://tiny.ly/K0Xz

  4. How did you decide to go with fontsforweb.com? I have been using Typekit but would like to have more options.

    • Hi Dorian,

      My client decided for me. I had never header of fontsforweb before, but then again, I wasn’t looking either. I have been following Google Web Fonts for awhile now and they seem to have regular additions too.

      Thanks for taking the time leave a comment:)

      • Ah! I haven’t looked into Google Web Fonts – will have to check that out. I also saw that fonts.com now offers web fonts, and I know they have a very extensive selection. Trying to decide if I want to shell out for that, too, or just stick with Typekit. http://webfonts.fonts.com/

  5. Commenting on Google Web Fonts. Am curently using them in a Geneiss Child theme of my own making that features Google fonts from the collection. Couldn’t have been easier. Just add the required code to the header box mentioned above and style the CSS using the font name and style you mentioned.

    Adding a font outside the Web Font collection is possible using the API but I haven’t gone there yet…

  6. Hi there,
    You could simply use “Font” plugin for wordpress to achieve same thing as you’ve described
    http://wordpress.org/extend/plugins/font/

    After installing pluing go to
    Appearance->Fonts

    and select font which you like. Much simpler.

    • Hi Pawel,

      Thanks for the comment, always nice to hear from a plugin developer:) It’s true that your plugin for FontsForWeb is very useful. I would recommend it to anyone reading this.

      However, the reason I went with the method I did was because your plugin didn’t affect the nav menu or widget titles (both visual options we decided not to use in the end).

      I’ll be writing up another article here in a couple days detailing how I changed the nav menu and widget title fonts.

      As I said, you’re plugin is awesome and very useful, we just decided to go another route with this one.

  7. Hi there,
    So if you are using a Genesis child theme, you still put the font code in the header.php of Genesis? Won’t that get overwritten when the theme is updated? Thanks!

  8. Cheers Adam, thanks! I will give it a try…

Speak Your Mind

*