How to add web fonts to the WordPress editor

More and more, I’m using Google Web Fonts (and other web fonts) in custom themes I build. Many times, it’s straightforward (“headings are always Arvo!”) but some clients want a little more control over what font is used within their posts. I thought I’d document the process so other folks can do the same thing.

Things to note about this method

  • This is what I do on a custom theme, i.e. one that I’ve built and control. If you’re using a theme that might potentially have updates down the road (like a theme from Theme Forest/Woo Themes/etc.), it would be better to do this as a plugin, so this magic doesn’t get overwritten by a new version. (If you’re interested in that variation, leave me a comment; if there’s enough interest I’ll write that tutorial.)
  • There are other ways to do something very similar (in particular, using TinyMCE’s “Font family” drop-down), but this one produces cleaner code, so it’s the one I use for my clients’ themes.
  • I’m assuming you already have a web font in mind and ready to use.

30,000-foot overview of the technique

Here’s what the final result will look like:

Adding web font to TinyMCE, the WordPress editor

We’ll get this result by creating a CSS file that declares our web fonts, including that CSS file in a few relevant places, and telling TinyMCE (the visual editor in WordPress) to make a few special styles available.

Prepare your CSS

You can add the web font CSS to an existing CSS file, but creating a new CSS file means that you’ll be loading just what is needed. (If you’re concerned about loading a separate file, you may want to research tools that combine and minify styles.)

I create a file called webfonts.css, and inside that file goes two main things:

  1. The web font declarations
  2. Classes created to use those fonts

The web font declarations

Most web font providers/generators will give you sample CSS code showing usage of the web font. Add that to the CSS file, and make sure you have the path location correct (if you’re hosting the font files as part of your theme, you’ll want to make sure those are in place!). Here’s what mine look like:
[code type=css]@font-face {
font-family: ‘Museo100’;
src: url(‘fonts/Museo_Slab_100-webfont.eot’);
src: url(‘fonts/Museo_Slab_100-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘fonts/Museo_Slab_100-webfont.woff’) format(‘woff’),
url(‘fonts/Museo_Slab_100-webfont.ttf’) format(‘truetype’),
url(‘fonts/Museo_Slab_100-webfont.svg#MuseoSlab100Regular’) format(‘svg’);
font-weight: 100;
font-style: normal;
}

@font-face {
font-family: ‘Museo300’;
src: url(‘fonts/Museo300-Regular-webfont.eot’);
src: url(‘fonts/Museo300-Regular-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘fonts/Museo300-Regular-webfont.woff’) format(‘woff’),
url(‘fonts/Museo300-Regular-webfont.ttf’) format(‘truetype’),
url(‘fonts/Museo300-Regular-webfont.svg#Museo300Regular’) format(‘svg’);
font-weight: 300;
font-style: normal;
}

@font-face {
font-family: ‘Museo500’;
src: url(‘fonts/Museo500-Regular-webfont.eot’);
src: url(‘fonts/Museo500-Regular-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘fonts/Museo500-Regular-webfont.woff’) format(‘woff’),
url(‘fonts/Museo500-Regular-webfont.ttf’) format(‘truetype’),
url(‘fonts/Museo500-Regular-webfont.svg#Museo500Regular’) format(‘svg’);
font-weight: 500;
font-style: normal;
}[/code]

Classes created to use the fonts

You can declare any type of class you like here; these are the behind-the-scenes part of the options we’ll give the author when they’re writing the post.

I’m keeping mine super-simple, but you can name them however you like, and add any characteristics you want.
[code type=css].museo100 {
font-family: Museo100;
font-weight: 100;
}

.museo300 {
font-family: Museo300;
font-weight: 100;
}

.museo500 {
font-family: Museo500;
font-weight: 100;
}[/code]

Include your CSS

Once you have your CSS file saved, the next step is to ask WordPress to include it in the front-end (so it actually shows up on the site!) and the back-end editor (so the author can accurately see what their text will look like).

You’ll add this in your theme’s functions.php file (again, make sure the paths are accurate to your file structure):
[code type=php]/**
* Enqueue stylesheet on the front-end
*/
function cim_add_stylesheets() {
wp_register_style( ‘webfonts’, get_template_directory_uri().’/css/webfonts.css’);
wp_enqueue_style( ‘webfonts’ );
}

add_action( ‘wp_enqueue_scripts’, ‘cim_add_stylesheets’ );

/**
* Add stylesheet to TinyMCE
*/
function cim_mce_css() {
return get_template_directory_uri().’/css/webfonts.css’;
}

add_filter( ‘mce_css’, ‘cim_mce_css’ );[/code]

Add the “Styles” drop-down

Now the point at which we pull it all together and make the classes available to the author! This is also in the functions.php file:
[code type=php]/**
* Add “Styles” drop-down to TinyMCE
* Based on http://jacksonwhelan.com/2011/08/adding-custom-css-classes-to-tinymce-format-dropdown/
*/
function cim_custom_mce_styles( $init ) {
$init[‘theme_advanced_buttons1_add_before’] = ‘styleselect’;
$init[‘theme_advanced_styles’] = ‘Museo 100=museo100,Museo 300=museo300,Museo 500=museo500’;
return $init;
}

add_filter( ‘tiny_mce_before_init’, ‘cim_custom_mce_styles’ );[/code]

See line 7? That’s where you customize what shows up in the drop-down, and what class is used for any text that’s assigned that style.

It’s pretty simple: they’re just pairs, separated by the “=” sign. The first half is what will show up to the author; the second is the class name. The first half can have spaces, as shown with my example; the second half follows all the regular rules for CSS class naming.

And that’s it! Assuming you’ve got all the paths to the files correct, you should see the new “Styles” drop-down.

Take it further

This is useful for way more than just fonts. You can do elaborate styling by just adding the appropriate CSS code for the class you’ve defined.

I use this same technique to style things like special boxes for testimonials and unique image treatments. You’re only limited by your creativity!


Sarah Lewis

Sarah builds websites and systems with equal ardor, and she's at her happiest when waffling something unexpected. She's anxiously awaiting solar freakin' roadways and also transporters, and doesn't much care for writing about herself in the third person.

Leave a Reply

Your email address will not be published. Required fields are marked *