Changing Fonts on Your WordPress Site

This week I decided to change the font I use on this web site. Why? When I first showed the site to my wife and a few other people they thought the domain name was pronounced ox-craft. As in oxen.

Oops. My attempt at a cleverly geeky domain name didn’t go quite like I planned.

Nope, this site is not about oxen related arts and crafts.  At least not yet. Of course, who knows what the future holds?

The domain name is an incorporation of the notation for hexadecimal integers zero-x,  0x, pronounced “hex” and the word “craft” which would be pronounced “hex-craft”. (More info on zero-x  here.)

A big source of confusion has to do with the fonts available in WordPress. The number “0” and the letter “O” look very similar on most screens in commonly used fonts. This is one reason zero-x is used frequently in computer programming. The slashed zero is a much clearer representation of zero than the slash-less version.

So, I thought I would experiment. Maybe using a font with slashed zeros would be less confusing?

I found one of the fonts I was looking for at https://www.fontsquirrel.com and the other hosted on the creator’s Github page. Make sure to check the licenses. Fonts are protected legally. Some you have to pay for and others are freely available.

When it comes to changing fonts in WordPress the first thing you have to do after finding a font you like is figure out how to access the font files.

You have two choices:

Tell your visitors web browser to import the fonts from a remote server every time they visit,

-OR –

_ You host the font on your server with your website._

The first option is pretty easy. One of the readily available plugins will have you up and running in minutes.  Accessing a remote server though can really bog down your site. Slow loading web site are bad for reader experience.

Then there is the privacy thing. Google sees enough of our lives as it is, they don’t need to see when you read this site. (No, I don’t use Google Analytics anymore either.)

Good news!

Hosting fonts is pretty straight forward. I was going to write up the whole process for you. Instead go to Elegant Themes. B.J. Keeton did a really nice write up here.

The short story is you:

1. Download the font files you want to use,
2. Upload the font on your web server using FTP or with a file manager through cPanel.
3. Copy and paste some bits of css code into your style.css and custom.php files,
4. and, you are done!

After you get a font you like check out your web site with different browsers. Get some help from your friends. Different device and browser combos can display your font differently.

In my case, the fonts I decided on are Inconsolata and  Inconsolata-LGC. Unfortunately, the slashed zero doesn’t show in all browsers. For example, the Silk browser on my Kindle and the browser on my Android phone don’t render the zero with a slash. The font though still looks appropriately geeky .

Update: This site now runs using static files generated by the very fast static site generator Hugo instead of Wordpress.