In this tutorial, we’d be talking about adding custom fonts to your WordPress theme, and applying them using CSS. A little knowledge about CSS is preferred here, but not mandatory, as I’ll be going through each and every step, providing as much detail as possible.
If you’re already familiar with CSS, then you must be aware of the font-family property, which lets you change the font-type of the selected elements. By default, most browsers support only a generic set of fonts, which could be applied using CSS without much hassle. Some examples of such fonts are Arial, Verdana, Helvetica, Georgia, Impact, Sans-Serif, Times New Roman, etc. But, they doesn’t restrict us to use our own custom fonts. So, in the following scenarios, I’d be using a custom font ‘Paprika’ available at Google Fonts Directory, and applying it to an <H1> heading tag in our theme. You could use any custom font you like, but for the sake of this tutorial, I’m going to use ‘Paprika’.
We’d be adding the new custom font to WordPress using two different techniques:
- @font-face method to define a new font family in CSS.
- Linking to the font’s stylesheet, provided by Google Fonts Directory.
Before we proceed with the methods mentioned above, here’s how the <H1> tag (on which we’re going to apply our new font) currently looks like.
The current CSS for that <H1> tag, in theme’s style.css file is:
h1.entry-title {
font-family: Georgia, Arial, Helvetica;
}
In case if you’re new to CSS, the above rule selects all the <H1> tags with it’s class name set as “entry-title”. The font-family property here defines a set of 3 font families, separated by comma. This is just a fallback method, in-case if the font defined first do not work for some reason, in which case it tries to process the second font family and so on, in that order. Currently, the <H1> tag is using ‘Georgia’ font.
Method 1: Define a New Font using @font-face
If you have a font file (usually .TTF or .OTF) available with you, this method is recommended. To define a new font family, navigate to Appearance >> Editor, and make sure the active stylesheet file (usually style.css) of your theme is open. Now, append the following CSS code.
@font-face {
font-family: 'Paprika';
src: url('fonts/Paprika-Regular.ttf') format('truetype');
}
In the above code, @font-face marks the beginning of a custom font definition. The font-family property here defines the name of the font to be added, and through which it is going to be recognized, so make sure it is unique to avoid any ambiguity. The src property consists of 2 parts:
- url – path to the font file which you want to add (either absolute or relative)
- format – type of font-file (usually either ‘truetype’ or ‘opentype’)
And that’s it! You’ve just added a new font to your WordPress theme.
Method 2: Linking to Font Stylesheet (Google Fonts only)
Before, we proceed with changing the font type of the <H1> tag, lets discuss the second method of adding new custom font as well. This method is applicable only if you’re using Google Fonts.
After you’ve selected a font from the Google Fonts Directory, you’ll be provided with a single line of code, a <link> tag similar to the one below.
<link href='http://fonts.googleapis.com/css?family=Paprika' rel='stylesheet' type='text/css'>
Now, go to Appearance >> Editor and open the header.php file. Locate the closing HEAD tag i.e. </HEAD>, and copy-paste the code just “before” this tag. Hit the “Update Changes” button to save the file, and that’s it. You’ve successfully made a link to the font stylesheet, and it’s ready to use.
Applying New Custom Font using CSS
After adding a new custom font using either of the two methods, it’s time to apply it to the <H1> tag discussed above. Here’s my CSS code using a new font-family named ‘Paprika’.
h1.entry-title {
font-family: 'Paprika', Georgia, Arial;
}
Make sure you use the exact font name (with quotes), which you used to define the new font, inside @font-face. If you’re using Method #2, the font name should be same as the one defined in the <link> tag. For example, the bold part below is the font name to be used with the font-family property.
<link href=’http://fonts.googleapis.com/css?family=Paprika‘ rel=’stylesheet’ type=’text/css’>
Now, save changes to your stylesheet file, and Voila! You’ve just added and applied a new custom font using CSS. Here’s how the <H1> tag looks like on my end.
Share with us, your views regarding the above discussed techniques. Let us know if these methods work out for you.