+44 (0)7725697909 sian@oneredsockdesigns.co.uk

Having spent days trying to wrap my head around how to customise the fonts on my site, I thought I’d share the solution here (for my own personal reference) and to help you if you’re in the same boat.

It’s not that there’s not enough information ‘out there’ - it’s just that it all seems skip one tiny vital little step, upon which the whole thing hangs. So here, for all those feeling brave enough to attempt to monkey with the code a little and picky enough to want that particular font, is my 5-Step Beginner’s How To Customise Your WordPress Fonts.

I’m only talking about WordPress here, so if you’re a ‘real’ coder this probably won’t help you.

Step One: Find your fonts

I know, you’ve probably already decided, but if you don’t really have your heart set on a fancy font there’s pretty much no point in going through all the aggravation. There’s a reason Amazon, eBay, Facebook and the rest use default fonts. They load quicker and they’re as close to universal as it’s possible to be, which all boils down to - they’re SAFE. (Don’t for one second believe Amazon just couldn’t be bothered to change their font. They know how to optimize their site.)

The more customisation you add to your site the slower you will make it. This goes for fonts, plugins, fancy graphics, you name it. Fortunately, computers are getting faster and broadband exists, but that doesn’t mean you should take speed issues lightly. Not everyone is using the lastest brower on a 50Mb pipe or a 4G connection.

However, if you’ve decided nothing else will do (as I clearly have with this site), then go for it. Just make sure all the fonts you use are legal. Check out Fontsquirrel for more beautiful fonts than you can shake a stick at (and most of them free for commercial use!).

Once you’ve figured out what you want, you need to have a think about your back up fonts. Sometimes fonts just won’t load. So the browser needs to know what to use instead. If you don’t tell it what you want, it’ll make its own mind up, and goodness knows what your visitor will see!

So choose what your fallback fonts will be - you need at least one for each font you use. I like to have two, a ‘bog standard’ one and then the obligatory generic family name as well (serif, sans-serif, cursive, fantasy, monospace. But don’t use monspace. Bad things will happen.). If you have nothing else, have the generic family name at least.

This is what each of my font stacks look like for this site:

h1 { font-family: ‘fff_tusjbold’, ‘josefin_slabbold’, Georgia, sans-serif; }
h2, h3, h4, h5, h6 { font-family: ‘josefin_slabbold’, Gerogia, sans-serif; }
p, .p2, blockquote, div { font-family: ‘josefin_sansregular’, Verdana, sans-serif; }

Verdana and Georgia are my preferred fallback fonts (they’re fairly ubiquitous), but if even they fail the browser should at least show a sans-serif and a serif in the right places.

I’ve also tweaked things like colour, size and line height for some of them, but that’s way more detail than you probably need. If you fancy a play, here are some of the values you might want to use:

color: #000000; font-size: 100%; line-height: 100%; top-padding: 100%; bottom-padding: 100%; margin-top: 10px; margin-bottom 10px

Step Two: Get the Webkit for your fonts

Again I’m going to direct you to FontSquirrel here. They have a handy dandy tool that will help you make your own webfont from whatever font you care to upload (subject to certain legal restrictions).

It’s super simple. Upload the fonts you want (only 4 at a time, but you need to think very carefully about having more than 4 on your site - remember that speed issue I was talking about). Tick the box that says you’re legal (because you are, aren’t you!) then hit download. Simples. (I use the Optimal setting for this.)

Step Three: Upload your Font Webkit

Now comes the more techy bit. You need to upload your fonts into your theme, so they’re available to everyone. For this you will need access to the back end of your website (your files on your host’s servers) and an ftp client. All my sites are hosted with Flywheel (who are simply wonderful) and I use FileZilla as my ftp client (it’s super simple to use).

Open up your ftp client, and connect to your host servers. You’ll need a username and password, and possibly a port number. (Your host can tell you what these are.)

Upload the files from your webfont kit on your computer into the Fonts folder in your theme. The path probably looks something like this: …/wp-content/fonts.

Make sure you’re putting them in the theme contents folder, not the root folder, or all your hard work will be lost the next time you run a WordPress update.

The specific files you’re looking to place there are those ending:

  • .eot (for Internet Explorer)
  • .svg (for iPhones and Chrome)
  • .ttf (for Chrome, Firefox and Opera)
  • .woff
  • (possibly .woff2)

Step Four: Update your CSS

This bit is crucial or the browser won’t know what to look for or where to find it.

You’ve already come up with your ‘what to look for’ code in Step One (your font stacks). You’ll need to add that in, but first you need to write the ‘where to find it’ code. This bit really stumped me for a while.

I’m using the @font-face CSS rule (because it’s generally considered to be best practice, and I like to do things properly).

This is what your code should look like:

@font-face{

font-family: ‘NameOfTheFont’;

src: url(‘/wp-content/fonts/NameOfTheFont-webfont.eot’);
src: url(‘/wp-content/fonts/NameOfTheFont-webfont.eot?#iefix’) format(‘eot’),
url(‘/wp-content/fonts/NameOfTheFont-webfont.woff2’) format(‘woff2’),
url(‘/wp-content/fonts/NameOfTheFont-webfont.woff’) format(‘woff’),
url(‘/wp-content/fonts/NameOfTheFont-webfont.ttf’) format(‘truetype’),
url(‘/wp-content/fonts/NameOfTheFont-webfont.svg#NameOfTheFont’)
format(‘svg’);

}

Change “NameOfTheFont” to match the name of your chosen font. If you’ve put the fonts somewhere other than in the “wp-content/fonts” folder of you will need to change the url path too. If you have more than one font to add simply duplicate the whole lot and amend it again.

Put this bit of code in first, then add your bit from before, specifying which fonts to use for what. (That way the computer will read everything in the right order and will know what to do with it.

Remember to press save!

Step Five: Check everything works

Reload your pages (you may need to clear your cache) and admire your handiwork. Then go test it in as many browsers as you can think of - including those on mobile phones and tablets. Ask your Mum to check it on her computer and your brother to check it on his phone. If it’s all working perfectly pat yourself on the back and crack open a cool beverage. That pretty much never happens.

Handiwork not so handy?

Welcome to the reason I wrote this post!

Some trouble shooting tips to try

  • Triple check you’ve got your coding right… an incorrectly placed ‘ can screw it all up royally. You basically want one around each parcel of information - they act like buckets in which you hold stuff.font-family: ‘TheNameOfTheFont’;

    src: url(‘the/url/of/the/exact/file’)
    Include the .extention inside the closing mark.

  • While you’re at it, check you have your { and } in the right places too. You want an opening one after @font-face and a closing one at the end of the chunk of code for that font family.
  • Make sure you’re calling the fonts the right things. Sounds simple, but humans are great at ignoring case, ignoring hyphens, or reading words with nospacesbetween and still being able to read them. Machines, not so much.
    Use the exact name of the file you uploaded in your ‘where it is’ code AND in your ‘use this’ code.

Some other places to go for more advice

  • If you’re having trouble getting a font to load, check out this video from Fontspring on troubleshooting webfonts. It’s quite technical, but has helped me spot things I just couldn’t see when I’ve been stuck.
  • Check out Orde’s post on how to use a web font loader. It takes things to the next level, getting your custom fonts to work without compromising your site load times.

Good luck!