• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

How To Add Custom Fonts In WordPress

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

Related Tutorials

  • Add Custom Fonts To The WordPress Editor
  • How To Install Google Fonts In Any Theme – Beginners Guide

Reader Interactions

Comments

  1. jem says

    March 31, 2014 at 8:45 am

    oh! thank you! I will try it! πŸ™‚

    Log in to Reply
  2. jem says

    March 30, 2014 at 11:03 pm

    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
    • Brad Dalton says

      March 30, 2014 at 11:06 pm

      Its a premium font by Typekit https://typekit.com/fonts/adobe-garamond-pro

      Log in to Reply
      • jem says

        March 31, 2014 at 8:32 am

        thank you
        I can’t use it?

        Log in to Reply
        • Brad Dalton says

          March 31, 2014 at 8:33 am

          Why?

          Log in to Reply
          • jem says

            March 31, 2014 at 8:34 am

            I can’t upload it on fontsquirrel

          • Brad Dalton says

            March 31, 2014 at 8:39 am

            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.

  3. Mariano says

    December 16, 2013 at 6:34 pm

    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
    • Brad Dalton says

      December 17, 2013 at 2:54 am

      You need to use this tool first to create a package http://www.fontsquirrel.com/tools/webfont-generator

      Log in to Reply
  4. Karla Archer says

    November 6, 2013 at 3:36 am

    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
    • Brad Dalton says

      November 6, 2013 at 3:58 am

      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 );
      
      }
      Log in to Reply
      • Karla Archer says

        November 6, 2013 at 8:28 pm

        Thank you, Brad! That worked πŸ™‚ So appreciate that you took the time to help with this!

        Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags