WP SITES

2757

Original WordPress Tutorials & 6000+ Guaranteed Code

Snippets

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

Reader Interactions

Comments

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

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

  4. 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!

    • 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 );

}

Leave a Reply