Add a Custom Font to Your Website

As a designer, Fonts are the bones of your design project and are the foundation of your brand identity.

Pick the right fonts, and you look like a million bucks  Sharp. Expressive. Smart. Fonts can instantly portray who and what you are.

Pick the wrong ones and well, you give a less than desirable impression.

The use of Google fonts really advanced online design options for the better and you are no longer limited to six or seven basic web fonts. If you have not checked out google fonts you can do so here. 

Before you get too giddy from all of the font possibilities I offer a word of caution. You need to balance how many fonts you use for any project.

Best practices is 2 to a maximum of 3 font styles. Any more than that and you run the risk of your design confusing visitors or viewers. And remember, the goal of Design is to not only look great but also effectively communicate your message.

I had a client that was in love with the font that they had used to create their logo and wanted to use the font on their site to keep a consistency in the look and feel throughout the brand. But the font they used was not a google font or any other web font.

The problem? How do you add a font to a WordPress website when there is no google font equivalent?

Believe it or not, there’s a plugin that lets you do just this.

It’s called “Use Any Font” and can be found in the WordPress repository here.  Best part? If you are squeamish about using code this plugin does it all for you.

After the plugin is installed go to the menu “use any font” on the left side WordPress dashboard

Then you will need to get an API key in order to upload your custom font. To get one of these they ask you offer a contribution fee (Free for 1 font, $10 to $100) – They do offer “free for 1 font” but I’d consider a contribution for their time putting this together this awesome plugin.

After you activate the API Key you will be able to add a font from your desktop.

After the font is installed simply go to your page you want to add the custom font to and highlight the text you want to style — select the “font” menu and you will see the name of the font you added. Click on the font and your type will be styled in that font.

Keep in mind that you may not see the rendered font until after you save and view the page.

If you are comfortable with CSS just simply put the font in for font-family like below and add it to where ever you are keeping your custom css.

.h1 {
font-family:”yourcustomfontname”, arial, sans-serif;

Cheryl is an award-winning designer that assists companies get to the next level through marketing design for print, digital and web. She can be found at http://www.forziatidesign.com


10 Must Have Web Resources