How To Add Custom Fonts In WordPress

Oct 29, 2012

—

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');
}

The above CSS rule assumes you have added your font file in a folder named fonts, in your child theme folder.

If you add your font files in your child themes root directory, the CSS rule would look like this as the path is different :

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

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

Here’s an example of how to use 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;
}

Font Generator

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

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');
}

Comments

12 responses to “How To Add Custom Fonts In WordPress”

jem

March 31, 2014

oh! thank you! I will try it! 🙂

Log in to Reply
jem

March 30, 2014

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

Log in to Reply
1. Brad Dalton
  
  March 30, 2014
  
  Its a premium font by Typekit https://typekit.com/fonts/adobe-garamond-pro
  
  Log in to Reply
  1. jem
    
    March 31, 2014
    
    thank you
    I can’t use it?
    
    Log in to Reply
    1. Brad Dalton
      
      March 31, 2014
      
      Why?
      
      Log in to Reply
      1. jem
        
        March 31, 2014
        
        I can’t upload it on fontsquirrel
      2. Brad Dalton
        
        March 31, 2014
        
        You will need to choose your fonts before uploading to font squirrel.
        
        The plugin is a separate solution which doesn’t require any installation of custom fonts.
Mariano

December 16, 2013

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

Log in to Reply
1. Brad Dalton
  
  December 17, 2013
  
  You need to use this tool first to create a package http://www.fontsquirrel.com/tools/webfont-generator
  
  Log in to Reply
Karla Archer

November 6, 2013

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!

Log in to Reply
1. Brad Dalton
  
  November 6, 2013
  
  Hello Karla
  
  Try one of these:
  [code]
  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 );
  
  }
  [/code]
  
  Or you can enqueue them separately
  
  [code]
  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 );
  
  }
  [/code]
  
  Log in to Reply
  1. Karla Archer
    
    November 6, 2013
    
    Thank you, Brad! That worked 🙂 So appreciate that you took the time to help with this!
    
    Log in to Reply