Latest From the Portfolio

Complete Guide To Custom Fonts: Add Custom Fonts to Your Blog or Website Using CSS – You’ll Never Believe How Easy It Is!

11th September 2013

See the “Kris Barton Online” logo at the top of my page? Pretty cool, huh?

What if I told you that isn’t a image? What if I told you that’s actually a custom font styled by CSS? Even cooler, right?

And it get’s better: it’s REALLY EASY to do.

Let me show you.

Custom Fonts vs Images

There are good arguments for both using CSS-styled Custom Fonts and Images for your website or blog’s logo. For example, people often choose custom fonts over image logos because they can reduce web page load time, whereas people prefer to use image logo’s because can help you better brand your blog or website. Of course, an optimal solution might be to have the logo as an image and the headline text as a custom font – the same custom font used the image perhaps.

But what if you don’t have Photoshop? What if you can’t afford to pay a freelancer to create you a logo? In that case, perhaps custom fonts is the best solution for you.

Me, I DO have Photoshop and I DO have the skills to create a logo for my blog, but I chose to use custom fonts in CSS instead. I did this for a number of reasons:

I prefer a minimalist, low image style of web design.

I love using CSS to do cool things.

It’s both a faster and easier way to create a website logo.

What are Custom Fonts?

Custom Fonts are fonts which are not standard within your (or most other people’s) PC’s operating system. This means that if your website or blog tries to use a custom font without properly importing it, the users web browser will simply show a standard font.

The idea of using custom fonts on websites is to load these fonts on the server where your website or blog actually sits so that it doesn’t matter whether the user has this custom font in their PC operating system or not – the custom font is coming from your website.

Pretty cool, huh?

Where Can I Find Custom Fonts?

There are a number of websites available which caters specifically for people requiring custom fonts, ranging from free to paid.

One of the more popular one’s is Google Fonts. Google Fonts is a free service which houses a good number of free fonts you can use and has a tonne of documentation to help you on your way.

Google allows you to either download the fonts so that you can upload them to your server or they provide you with a link so that you can load the custom fonts directly from Google servers. Usually, I prefer to download them as linking to Google for the fonts can affect your webpage’s load times (especially if you’re using more than one font) and you never know when Google is going to eliminate one of its services (RIP Google Reader).

Linking to Google in order to use the fonts is a better solution if you don’t know how or don’t have access to upload files to your server – in this article I’ll show you how to do both.

Other good places where you can find Free Custom Fonts are DaFont and DeviantArt, but here the only way to use them is to download these fonts and upload them to your website or blog server in order to use them.

How to Add Custom Fonts to You Website or Blog

As I previously mentioned, if you’re using Google Fonts there are 2 ways you can add custom fonts to your website:

1. Upload the Custom Font to Your Server

Step 1: Download Your Font

Wherever you chose to go for your fonts, download the font to your PC. You should end up with a TTF (True Type Font) file. If the file is zipped, be sure to unzip it in a memorable location.

Step 2: Upload Your Font to Your Server

If you already have this capability then in all likelihood, you’re already going to to know how to upload simple files, so I won’t go into too much detail about the actual upload process.

If you’re uploading a file to a WordPress blog for the first time, make sure you upload it to the theme of your blog.

If you’re unsure where that is, do the following:

Go to your blog and then find the wp-content folder.

Click to access this and then you should see a themes fold.

Click to access this and you should find a folder with the name of your WordPress Template.

Your template directory might be different from mine – or any other WordPress Theme for that matter – but when I design my own custom WordPress templates, I usually have a folder for images. As a rule, this is usually where I upload my fonts to.

You could even just create a folder called “Fonts” and upload it to there if you wanted to.

Step 3: Editing Your CSS

IMPORTANT: Before you edit any code in your WordPress blog, I strongly suggest that you take a full back-up so that if anything goes wrong, you can easily restore your template to exactly what it was before the changes.

Now let’s take a look at the CSS we’re going to add to our CSS file:

Let’s breaking down the code:

@Font-Face is basically to tell the Web Browser that your registering a custom font.

font-family: headline. Usually in CSS, font-family is used to declare the font you would like to display but in this context (within the @Font-Face code) it’s basically used to register the name of your custom font. You could pretty much call this anything, but its always a good idea to make it clear for future use within the CSS.

src: url(‘images/headline.ttf’); is us declaring where the custom font TFF file sits on our server. Say for example you chose to create a fonts folder and upload your text there, it would be ‘fonts/headline.ttf’ instead of ‘images/headline.ttf’

And that’s it. Your custom font is set up and ready to be used – I told you it was easy!

Step 4: Using Your Custom Font

So now you’ve set up your custom font, you might be wondering how to use it on your website. Let me explain:

Find in the CSS where you want to use your custom font. If you want to use it for every H1 tag in your website, then check your CSS file for the H1 identifier (or add one if it doesn’t exist).

Now it’s a simple matter of changing your font for the H1 tag (or adding one). The font-family should be changed to whatever you called your font in the previous step. In mine, I used ‘headline’, so I should change the font-family for my H1 tag to font-family: headline.

It should look something like:

If you want to use the font anywhere else, just edit the relating CSS font-family and that should do it.

That’s it, you’re done. Pretty cool huh?

2. Link to the Custom Font via Google Fonts

As I mentioned earlier in the article, there is in fact an even easier way to add a custom font to your page which won’t involve you uploading anything to your servers and that’s by connecting your website or blog to Google Fonts.

This is even easier than the previous way, let me show you:

Step 1: Get the Google Font Link

Go to Google Fonts, choose the Font you want to use and then click the “Quick Use” button just below the text.

If you scroll down the page, you should find a link which Google tells you to add your website – see an example below:

For the example above I’ve selected a custom font called Kavoon and as you can see, the link to Google Fonts declares the custom font by name at the end of the link. With Google Fonts you can select a number of fonts and with each font you select, the name will be added to the end of the link similar to the above example.

When Google Fonts presents you with this link, you should copy & paste it into the HEAD section of your blog or website (for WordPress users, this is generally located in the header.php file of your theme). For more information, head on over to the Google Support Documentation.

Now it’s just a case of editing your CSS and using the font in exactly the same way as I’ve shown you in the previous example.

Even easier, right?

In Summary

So let’s sum up what we’ve learnt in this tutorial, shall we?

Using custom fonts is a way to make your website or blog look professional if you’re unable to use an image logo.

Custom Fonts can reduce the load time of your webpage, HOWEVER, using multiple custom fonts when using the linking method from Google Fonts can increase the load time of your webpage.

Using custom fonts is FAST, FREE and EASY.

Let Me Know If I Can Help

If you have any questions regarding this tutorial please head over to my Contact Page, Twitter Account or post a comment below and get in touch!

If you would like to hire me to do this change for you (I don’t charge the moon for this), then also please get in touch.