| WordPress
How to Use Custom Fonts in 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

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:

@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; }

  • 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.

url('wp-content/themes/your-theme/fonts/font-file.eot')

  • Replace font-family with your own name:

font-family: 'font name';

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

font-weight: normal;
font-style: normal;

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):

body {
    font-family: 'font name';
}

To assign to paragraphs:

p {
    font-family: 'font name';
}

To assign to the headings:

h1,
h2,
h3 {
    font-family: 'font name';
}

To include a class or id in the selector:

#my-id h1,
.my-class p {
    font-family: 'font name';
}

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

p {
    font-family: 'font name' !important;
}

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:

p {
    font-family: 'Times New Roman', Times, serif;
}


About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in support.