This coming Tuesday I will be speaking at WPNYC, the official New York City WordPress Meetup, on the topic of WordPress and Typography.

Having started out as a front-end developer, I have always been inspired by beautiful typography used properly. I will post my slides once the recording of the talk goes live, but for now, in preparation, I thought it would be nice to post something about how to actually use typefaces on your site that are not available by default.

In my talk I will cover this topic as well as a provide a few tips on what to avoid when choosing and implementing your type choices.

What’s available?

We are living in a wonderful age of type. There are hundreds of thousands of fonts available online. Which should you choose? I’ll cover a little of that on Tuesday, but for now, I’ll leave it up to you. Here are, IMHO, the three most accessible options where you can find some interesting choices:

1. TypeKit – Now owned by Adobe, a truly rich and easy to use platform. www.jackreichert.com proudly uses TypeKit fonts. Free account allows two fonts, which is just fine for most any creative designer to utilize.
2. Fonts.com – While it’s a pretty site, navigation is clearly focused on being unfriendly towards people wanting to try the service before they buy. Here is the buried link to the free fonts.
3. Google fonts – It got a lot of negative reviews at the beginning because, honestly, they weren’t very discerning. However, since then a lot of money and effort has been put into getting some quality fonts available.

Notable mention: Font Squirrel, they don’t host font files, but it’s a great resource for finding affordable quality fonts. Their Webfont Generator is great for helping you find the ideal “bulletproof @font-face syntax”.

/* Generated by: FontSquirrel  */
@font-face {
    font-family: 'corbert-regular';
    src: url('corbert-regular-webfont-webfont.eot');
    src: url('corbert-regular-webfont-webfont.eot?#iefix') format('embedded-opentype'),
         url('corbert-regular-webfont-webfont.woff2') format('woff2'),
         url('corbert-regular-webfont-webfont.woff') format('woff'),
         url('corbert-regular-webfont-webfont.ttf') format('truetype'),
         url('corbert-regular-webfont-webfont.svg#webfontregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Simply add the above into your stylesheet and you’re good to go using: body { font-family: corbert-regular, sans-serif; }

A note on “free” fonts

“Free” often means you’re paying in some other manner. “Free” fonts are often knockoff fonts of well crafted classics. Why should you care? Because if you’re going through the trouble of caring about details to the level of which typeface you want to show your content through, you should care about the quality of that typeface.

Alternatively, a free font may be designed by an amateur designer, who then releases it because it’s not quite professional yet.

What’s missing? A lot goes into the crafting of a quality font.

• Italics, aren’t simply a font tilted, and bold isn’t simply a stroke added to the font. If you’re okay with doing that, JUST STOP READING NOW. LEAVE. SERIOUSLY.
• Kerning, each letter fits differently with each letter pair, a quality font will have the pairings programming in. Interestingly, pairings are effected by font-size as well.
• Overall quality, cheap knockoffs and novices won’t take scaling, or details properly into consideration.

Is “free” EVER OK? Yes. Over the past few years Google and Adobe have been commissioning fonts for open source projects. While Google Fonts once was a bastion of amateurism, it now has some high-quality complete font families. As with software, the open-source community has come to the rescue.

How do I do it?

<?php // add the following into your theme's functions.php

function theme_fonts() {
    // typekit
    wp_enqueue_script( 'theme_typekit', '//use.typekit.net/xxxxxxx.js');
    
    // fonts.com
    wp_enqueue_script( 'theme_fontsdotcom', '//fast.fonts.net/jsapi/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.js');
    
    // google fonts - Josefin (a favorite)
    wp_enqueue_style( 'theme_googlefonts', '//fonts.googleapis.com/css?family=Josefin+Sans');
}
add_action( 'wp_enqueue_scripts', 'theme_fonts' );

// typekit
function theme_typekit_inline() {
  if ( wp_script_is( 'theme_typekit', 'done' ) ) { ?>
  	<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<?php }
}
add_action( 'wp_head', 'theme_typekit_inline' );

Each of the above tools have their own way to create a collection of fonts, and all have great walk-throughs. Once you generate one replace the above code / paths with your custom generated one. Don’t forget to comment out, or remove what you’re not using.

Now you just use the fonts as you would any other in your stylesheet.

body { font-family: ‘Josefin Sans’, sans-serif; }

Note: enqueue_script() by default will add the script to the head of your site. If the font provider states that you need to enqueue your script in the footer of your site WordPress has you covered:

wp_enqueue_script( ‘add_my_font’, ‘//www.example.com/myfont.js’, array(), 20150613, true );

That “true” at the end will place the script into your site’s footer.