Categories
Wordpress Development

Using Custom Fonts in WordPress

There are a lot of great articles out there showing how to enqueue Google fonts and TypeKit fonts for your WordPress theme. However I found it a little less common to find solutions where you already have your own fonts (licensed to use of course) that you want to use on your WordPress site.

This quick-tip covers some basic setup and a neat way to create other font formats as well when needed. Note that this doesn’t cover the “plugin” method however. That’s written in great detail via Tom McFarlin’s post: Including Custom Fonts in WordPress Plugins. I just wanted a quick way to set it up without a plugin and that’s what this post aims to get at.

Photo by Matt Jones on Unsplash

Include Custom Fonts

The first thing to do of course is to get your fonts in order and placed into your theme’s directory. I generally add an assets/fonts directory to include with the theme if I’m not going to be packaging this technique into a plugin. I also find that I want as many fallback fonts as possible for the changing landscape of browser support so it’s best to make sure you have all the formats since we’ll be linking them up in our stylesheet. (example coming up below).

I found a great online resource for converting your licensed font into another format that may be necessary to ensure browser support between WOFF, EOT, TTF, formats and more. This site is pretty self-explanatory but allows you to get your converted font downloaded for free: https://everythingfonts.com/

Declare Custom Fonts in your Stylesheet

Now all that’s left to do is link up your stylesheet with a simple @font-face declaration at the top of your style sheet like so:

@font-face {
font-family: montebello-sans;
src: url('assets/fonts/Montebello-Sans.eot');
src: url('assets/fonts/Montebello-Sans.eot?#iefix') format('embedded-opentype'),
url('assets/fonts/Montebello-Sans.otf') format('opentype'),
url('assets/fonts/Montebello-Sans.woff') format('woff'),
url('assets/fonts/Montebello-Sans.woff2') format('woff2'),
url('assets/fonts/Montebello-Sans.ttf') format('truetype'),
url('assets/fonts/Montebello-Sans.svg#Montebello-Sans') format('svg');
}

What happens with the code is that it maps the font to its dedicated location in reference to the stylesheet. In this case it will look inside the assets/fonts folder that lies adjacent to the stylesheet location. Then depending on what browser is being used, it will comb through the list of available fonts that are supported and render them accordingly.

Photo by Jon Tyson on Unsplash

Declare your fonts in your styles

Once you have your fonts assembled and setup within your stylesheet, it’s time to use them. Let’s target all the h1.entry-title, h2.entry-title headers to use the Montebello-Sans font that I have declared above. A typical declaration would look like this:

h1.entry-title, h2.entry-title {
font-family:'montebello-sans', sans-serif;
}

Make sure to add a fallback font of course and you should be able to visually enjoy your web fonts on your website.

Leave a Reply

Your email address will not be published. Required fields are marked *