Here’s a topic that I found a bit hard to figure out because there seems to be quite a bit of confusion around adding custom fonts into WordPress. To Complicate things, I use the paid theme called Flexsqueeze 1.5. It’s an excellent theme that allows a ton of flexibility on creating the look and feel for a site.

I was working on a project recently and needed to add in a custom font based upon a true type font and I had to figure this dog out. I’d had tried many times to do this but for once and all, I’ve figured it out. Hopefully, this will help you too. (Well at the very least when I’ve got to do this again in a year, I can look back on my own post!)

Remember, this is working in the framework of Flexsqueeze within WordPress.

First, I take the fonts that I want to webify. Sometimes the font files are very large and if they are you must use a program to minimize the amount of glyphs in the font file. On Windows, the program I used was called FontForge. Now, it’s a quirky program and will at times hang on you. So, expect it.

For this example, I’m not going to worry about having a heavy font and the fonts I want to convert will work with the site we will be using to webify our fonts.

The site is Font Squirrel. It’s a free service that you can find at: http://www.fontsquirrel.com/tools/webfont-generator.

We will load our fonts (up to three per build). In this example, I’m just adding one font that is in the .oft format. It could be a .ttf font too, without issue.

font squirrel

Once you create the font, your browser should automatically download it.

Now, I like to add one font at a time if I have more then three. I find it easier to keep track of things going forward if I do that.

Next, unzip the file and give the directory a meaningful name to you. I like to rename fonts to more meaningful names, simply for ease of use. For example, the font I’m using here, Univers LT Std 47 Cn Tl Bold, to me will translate to UniverCondBold. Too easy.

Within the directory created by the zip we download, will have it’s own stylesheet.css. Here’s where we make a small fix for our ease. I’m going to change the cryptic font-family name to something I can remember.

stylesheet_change

So now, I have a font called ‘univers_cond_bold’ that I can use later in my design.

Next, we will take these font files and add them to our WordPress theme. In my case, it’s Flexsqueeze.

Within the flexsqueeze folder, /wp-content/themes/flexsqueeze150/ I will create a new directory containing my fonts called ‘fonts’. Now I can hear the WordPress purists screaming – ‘Don’t install customization into changeable and upgradeable areas of WordPress!’. Well you are right, but I’ve not found a better way to do this. Fortunately, themes like Flexsqueeze are very stable and upgrades are few and far between. So yes, keep notes on this theme customization so you know how to fix it on an update.

theme_directory

So you can see that I’ve loaded four new fonts into this theme. Now I have to tell the theme that they are there for our usage.

With most themes, you would insert the following line into the style.css file in the theme:

@import “fonts/univers_cond_bold/stylesheet.css”; (considering we are doing one font – you’d do one line for each font family you install.)

But with flexsqueeze, you cannot put it into the style.css file because Flexsqueeze creates a completely new css file whenever you change the configuration! So, where do we put it? With a bit of research, I discovered the file that generates the styesheet file. There’s another file called ‘style.php’ that is also in the root folder of the theme.

Look for the section of the file that looks like this and add in your @import statement. For example, here’s another site I did in the example below:

style_php_change

You’ll see that I added in the import pointing directly to the add-in style sheet. In our case, this statement would have read: @import “fonts/univers_cond_bold/stylesheet.css”;

Voila! We can now call our specialty font family from WordPress. You can select text, and give it the font-family of ‘univers_cond_bold’!

And all should work 100%!

 

 

Tagged with:

Filed under: Learn Wordpress

Like this post? Subscribe to my RSS feed and get loads more!