How To Add Custom Fonts In WordPress

Once you’ve found the fonts you want to use in your WordPress site, you’ll need to install them.

If you haven’t found the one’s you like yet, try these 6 providers of premium and free custom fonts.

There’s different ways you can add your custom fonts depending on your theme and where you get the fonts from.

Generally there’s the:

  • manual code methods or
  • installing different font loading plugins
Plugin: You can add more font styles & sizes to your visual editor by simply installing a fonts plugin.

Font Plugins for WordPress

Here’s some of the best plugins you can choose from to install your custom fonts depending on which fonts you choose:

  • http://wordpress.org/extend/plugins/typekit-fonts-for-wordpress/ – Install this plugin when using Typekit fonts
  • http://wordpress.org/extend/plugins/wp-google-fonts/ – Most popular plugin for adding Google’s web fonts to WordPress.
  • http://wordpress.org/extend/plugins/web-fonts/ – Support for web fonts from the Fonts.com web fonts collection out of the box.
  • http://wordpress.org/extend/plugins/font-uploader/ – Upload any font file types (otf and .ttf) and this plugin will embed them into your site using the CSS rule, @font-face

Install Google Fonts Manually

There’s also different ways to install your custom fonts manually.

If you’re installing Google web fonts using the @import rule, you don’t need to upload the font files to your server which is what you would do if your fonts are premium or custom web fonts.

Simply add this code to the start of your child theme’s style.css file

@import url(http://fonts.googleapis.com/css?family=Oswald);

This is the font used on the Genesis theme framework.

Once you’ve imported the fonts, you can then use them in your theme by editing your child theme’s style.css file like this example:

.site-title {
font-family: Oswald, Arial;
font-size: 45px;
}
Note: Its advisable to only import the fonts you’ll be using as they use server resources and can slow down your page loading times.

Install Custom Font Files Manually – Basic Solution

What about installing non Google custom fonts manually?

Here’s the most basic example which you place at the start of your child themes style.css file:

@font-face {
	font-family: Adobe Garamond Pro;
	src: url('fonts/agp.otf');
}

And then you simply create a new fonts folder in your child theme and upload the font file to that folder.

Here’s an example of how to add a new font in your theme. This code is placed at the end of the child themes style.css file and will make all h3 sub headings use the new custom font, Adobe Garamond Pro.

h3 {
font-family: Adobe Garamond Pro, Lato;
}

The font stack includes a fallback to Lato which is a Google font that’s also installed using another method and displays of the new Adobe Garamond Pro font doesn’t for some reason.

More Comprehensive Solution

Here’s an online font face generator which you can also use to an entire kit which includes everything you need to install fonts in WordPress.

This is what the CSS code will look like once you upload and convert your font files using the generator.

@font-face {
font-family: 'trashhandregular';
src: url('trashhand.eot');
src: url('trashhand.eot?#iefix') format('embedded-opentype'),
url('trashhand.woff') format('woff'),
url('trashhand.ttf') format('truetype'),
url('trashhand.svg#trashhandregular') format('svg');
font-weight: normal;
font-style: normal;
}

This is how the CSS code will look if you simply upload the file without using the generator depending on the number of fonts you want to use:

@font-face {
font-family: GoodDog;
src: url('http://www.example.com/wp-content/themes/child/fonts/GoodDog.ttf');
}
  • Paste the generated code into the start of your child theme’s style.css file OR use the standard method and write a function using action hooks so its loads in your themes header for best performance.
  • Edit your CSS file and add your new font to wherever you want to use it in your theme
Note: The @font-face rule is only supported by the latest browser versions. Not all file types are supported by all browsers. Read more about browser support of the @font-face CSS rule

For this reason, its best practice to install fonts in WordPress using an online @font face generator.

This will create the other file types (and supporting file kit) from your original font files that are supported by all browsers and mobile devices.

Loading of Fonts

This screenshot shows you the Google fonts loaded immediately after the site title and before the Magazine (child theme’s) CSS style sheet.

Fonts Style sheet

Pairings

Its best to try and use 2 fonts that work well together.

Google web fonts gives you pairings which match the title headings with body text like:

Oswald | Open Sands

Or you could use the same font which has 2 different styles.

Using Fonts In Your Editor

You can also install Google or any other fonts for use in your visual editor. This can be done by installing a plugin for this purpose or you can enable the hidden features like fonts styles in your visual editor.

Enabling the hidden features will activate a limited amount of font styles and sizes which are included in your editor files.

Adding custom fonts to your editor manually is beyond this post and something i will cover shortly in another post.

This way you can use the fonts with different heading sizes on a per page/post basis rather than site wide.

Never Miss a Tip from Brad Dalton

Get my latest web design tutorials, elegant coding solutions & useful tips.

5 Reasons Mad Mimi Works Better

mad-mimi
  1. Sends From Your Email Address - More personal & higher open rate
  2. Cheapest - $42 for list of 10,000 emails, unlimited sends
  3. Ease of Use - The easiest system to create & setup campaigns
  4. RSS to E-Mail - Auto send list of latest posts
  5. Auto Send Any Number of Days - enables you to offer multiple newsletters at different frequencies.

Click here to create a free account.

Comments

  1. jem says

    Hi
    i’m trying to upload
    Garamond Pro-Regular on fontsquirrel

    but there’s a problem

    Adobe has requested that their font
    Adobe Garamond Pro Bold Bold be blacklisted by the Generator.
    You will not be able to convert this font.
    can you help me please

    sorry for my english

  2. Mariano says

    Hi , really nice articule im trying to put Kravitz font which i downloaded from dafont in to the h1 headings in the site : http://www.sushiworld.info .

    First i try the plugin you recommend font-uploader , i uploaded and chose the font for headings and nothing happens.

    Then i check the style.css at the ristorante theme that i use, and it says make changes on style.less.css so i upload the font into the folder where are the default theme fonts and tryed something like this :

    @font-face {
    font-family: Kravitz;
    src: url(‘fonts/KRAVT___.TTF’);
    }

    h1 {
    font-family: Kravitz;
    }

    and it didnt work . im a begginer at coding but i like to learn :) . Thanks in advanced

  3. Karla Archer says

    Hi Brad~

    I’m trying to install two fonts from google to the functions.php file (after years of using the @import way). There is already a code in the file for one font, but not sure how to add the second?

    This is the code:

    //* Enqueue Lato Google font
    add_action( ‘wp_enqueue_scripts’, ‘sp_load_google_fonts’ );
    function sp_load_google_fonts() {
    wp_enqueue_style( ‘google-font-lato’, ‘//fonts.googleapis.com/css?family=Lato:300,700′, array(), CHILD_THEME_VERSION );
    }

    I’m trying to change the fonts to Quattrocento+Sans:400,400italic,700,700italic|Delius

    Any insight on this?

    Thanks so much!

    • Brad Dalton says

      Hello Karla

      Try one of these:

      add_action( 'wp_enqueue_scripts', 'wpsites_google_fonts' );
      function wpsites_google_fonts() {
      
      	wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700,700italic|Delius', array(), CHILD_THEME_VERSION );
      
      }

      Or you can enqueue them separately

      add_action( 'wp_enqueue_scripts', 'add_google_fonts' );
      function add_google_fonts() {
      
      	wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Delius', array(), CHILD_THEME_VERSION );
              wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700,700italic', array(), CHILD_THEME_VERSION );
      
      }

Ask a Question