How to Add Custom Fonts to WordPress

An OSTraining member asked us how to add two extra fonts to their WordPress site:

• A custom font
• A safe font, such as Times New Roman

In this tutorial, I’m going show you how to use CSS to add fonts to WordPress.

Note: if you want to add Google fonts, use this plugin instead.

Step #1. Simple Custom CSS plugin

• Install the Simple Custom CSS plugin as this post explains.

Step #2. Get your font files

Download the font files that you are going to use. Popular sources of fonts include My Fonts and Font Squirrel.

• Decompress the zip folder.
• Look for the font files which will have formats like these: .eot, .ttf/.otf, .woff, .woff2, .svg
• Upload the font files into your theme’s folder wp-content/themes/your-theme/fonts/

Step #3. Add @font-face to your CSS

• In your WordPress site, go to Appearance > Custom CSS.
• Add the code below, making sure to replace /your-theme/ with your theme’s folder:

{codecitation css}@font-face {
font-family: ‘font name’;
src: url(‘wp-content/themes/your-theme/fonts/font-file.eot’);
src: url(‘wp-content/themes/your-theme/fonts/font-file.eot?#iefix’) format(’embedded-opentype’),
url(‘wp-content/themes/your-theme/fonts/font-file.woff’) format(‘woff’),
url(‘wp-content/themes/your-theme/fonts/font-file.ttf’) format(‘truetype’),
url(‘wp-content/themes/your-theme/fonts/font-file.svg#font-name’) format(‘svg’);
font-weight: normal;
font-style: normal; }{/codecitation}

• For every font file available, add the path inside of url() data type. If you don’t have one of the formats such as .svg, just skip that line.

{codecitation css}url(‘wp-content/themes/your-theme/fonts/font-file.eot’){/codecitation}

• Replace font-family with your own name:

{codecitation css}font-family: ‘font name’;{/codecitation}

• Define the weight and style if you plan to add font variations. By default, set normal as the value for both:

{codecitation css}font-weight: normal;
font-style: normal;{/codecitation}

Step #4. Chose the font settings

Under the previous code, define which elements will use the new font. To do this worth learning Firebug or another inspection tool in order to find the CSS selector.

For example, if you want to assign the font to the body (all content):

{codecitation css}body {
font-family: ‘font name’;
}{/codecitation}

To assign to paragraphs:

{codecitation css}p {
font-family: ‘font name’;
}{/codecitation}

To assign to the headings:

{codecitation css}h1,
h2,
h3 {
font-family: ‘font name’;
}{/codecitation}

To include a class or id in the selector:

{codecitation css}#my-id h1,
.my-class p {
font-family: ‘font name’;
}{/codecitation}

Note, if your font is not being picked up, include !important declaration in order to force your theme to recognize the font:

{codecitation css}p {
font-family: ‘font name’ !important;
}{/codecitation}

Step #5. Include safe fonts

Safe fonts are easier to use in a website due are already installed in a wide range of computers system. To add a safe font such as Comic Sans, Impact, Times New Roman, Arial, Helvetica, etc. assign the font-family to your site’s elements:

{codecitation css}p {
font-family: ‘Times New Roman’, Times, serif;
}{/codecitation}