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:

  • – Install this plugin when using Typekit fonts
  • – Most popular plugin for adding Google’s web fonts to WordPress.
  • – Support for web fonts from the web fonts collection out of the box.
  • – 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(;

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


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.

Related Tutorials

Need More Help?

Join WP Sites to get full access to all tutorials & code.

  • Support for installation & modification of existing PHP code
  • Help with Genesis & StudioPress theme customisation
  • Access all tutorials & code snippets
  • Ask questions in the comments & get answers
  • Education - Request video explaining how the code works and what functions are included

Click Here to Learn More