Tired of the same boring fonts on your websites? Are you losing out on search traffic by using images to recreate portions of a design that use a unique font? Well we’ve got the product for you! Webfonts!
Webfonts are an excellent method for serving up fonts across a wide variety of devices and browsers in order to keep your branding consistent. There are a multitude of services offering webfonts through css, javascsript, or self-hosting. You’ve got Google Fonts1, Fonts.com, Typekit2, and Typography.com as some of the bigger services.
We’ll show the proper way to include a Google Web Font in your project today.
The first thing you’ll want to do is find a font you like Google Fonts. We’ll be using Roboto for this example. Once you find your font go ahead and add it to your collection.
Selecting Use add the bottom of the screen will take you to a page allowing you to select which font styles you want to use on your site. It’s a good idea to only select font styles you know you’re going to use as the more styles you add, the bigger the file size and the longer the load time. So we just selected to fonts for this example. Normal and Bold.
[insert font styles]
Below that you can select the character sets you want. Latin will be fine for our purposes.
The next section gives you three different ways of implementing the code. A standard link element to link to a css file hosted on Google Fonts. A CSS import you can include at the top of your CSS file. And finally a Javascript version.
These are all very easy to implement. You could take the Standard <link> and drop it in as the first element within your <head> and start using the font-family rule from the next section immediately, but it’s not the best way. If we want to properly implement it within WordPress we’ll want to enqueue the script.
We’ll just be using wp_enqueue_style for the purposes of this, but for a good explanation of the differences between enqueueing and registering scripts and styles check out this article at WPMUDev.
First we’ll want to create a function within functions.php to house our enqueued scripts. To do that open functions.php and create a new function called font_scripts. Then within that script we’ll want to enqueue the font using the wp_enqueue_style function with the URL from the Standard font code from Google Fonts.
Then all that’s left to do is call your new function when the wp_enqueue_scripts function is run using a WordPress hook.
You’ll end up with something like this:
function font_scripts() {
wp_enqueue_style('roboto', 'http://fonts.googleapis.com/css?family=Roboto:400,700');
}
add_action( 'wp_enqueue_scripts', 'font_scripts' );
Now all that’s left to do is add the font-family and font-weight rules to our CSS to our heart’s content. In the case of our Roboto example we could do something like this to make all H1s the bold 700 Roboto font.
h1 {
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
With that rule, all of our H1s will default to using Robot Bold. If we wanted them to be the Roboto Normal style we included we would set the font-weight to 400. That’s it. You’ve just enqueued a font from Google Fonts in your WordPress site.
Author: James Hipkin
CEO, Managing Director
James brings over 30 years of professional sales, marketing, and marketing consultation services to the table. Serving global brands along with small businesses, Hipkin leads a highly-skilled team of full-time developers, producers, and project managers who are committed to your success.
An excellent communicator and inventive problem-solver, his creative vision and bottom-line sensibility have proven successful at building productive, long-term partnerships with both employees and clients.