Add Custom Font to Your WordPress Site

We love the impact that various fonts can have in expressing a certain aesthetic or in aiding in the delivery of a message. It feels great when a certain font perfectly fits the style that you are aiming for. Sometimes theme providers give you font options that are exactly what you need, but alas, sometimes they don’t. This forces you to look for fonts from other providers. While you can pay for fonts online, we prefer free options ;). Our favorite source of high-quality free custom fonts is Google Fonts.

As I was browsing Google fonts, I found one that I really liked, the Lora font. There are two ways to add this font to a WordPress site.

While some themes may provide easier ways to do this, this is the most universal theme agnostic solution.

Both of the options below require that you first create a child theme. If you haven’t created a child theme yet, look into our post on creating child themes.

Option 1: Enqueue the Stylesheet in the Child Theme’s functions.php file

You would do this by locating the function that contains all of the styles that are being enqueued (search for wp_enqueue_style). Then, copy and paste the code below (replacing the second parameter with the custom font of your choosing).

wp_enqueue_style( 'lora-font', '//fonts.googleapis.com/css?family=Lora' );

Option 2: Updating your Child Theme’s style.css file

You can import a Google font in your style.css file using the following code:

@import url(//fonts.googleapis.com/css?family=Lora);

But, what if you downloaded a font onto your computer and you want to use it for your WordPress Site, how do you add it?

This involves using CSS’s built-in @font-face rule. To start, you will add the following @font-face rule typically to the top of your style.css file. You place it at the top so that you can use it in other rules throughout the file. Try to add as many versions of the font that you can, in order to make sure your font will be viewed by as many devices as possible. If you are missing some of the fonts, the most important to have would be woff and woff2 (as that would ensure the broadest level of browser support). It seems like the market is shifting to woff2.

For more info on browser compatibility, check out this post.

@font-face {
  font-family: 'Megalopolis';
	  src: url('assets/MegalopolisExtra-Regular.eot'); /* IE9 Compat Modes */
	  src: url('assets/MegalopolisExtra-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	       url('assets/MegalopolisExtra-Regular.woff2') format('woff2'), /* Super Modern Browsers */
	       url('assets/MegalopolisExtra-Regular.woff') format('woff'), /* Pretty Modern Browsers */
}

Then, you can use that font family in any rule in that stylesheet. For example, I wanted to style the header tags on my website to use the Megalopolis font and so I created the following rule:

h1, h2, h3, h4, h5 {
    font-family: 'Megalopolis', sans-serif;
}