How to add a Google font or custom font to your Blogger or WordPress blog

Todays post will discuss adding custom fonts to your blog on WordPress and Blogger using Font Directories or Google Web Fonts. Blogger has improved the font collection available in Template Designer, but choices are still limited.

One of the best and easiest ways to add a custom font to your blog is using Google Web Fonts with over 600 to choose from you’re bound to find one that you like. If you don’t want to use Google Web Fonts, I have a second method below showing you how to add any font to Blogger.

A very similar method is used for adding Google Web Fonts to wordpress.org sites. If you are on wordpress.com you do have to pay to get access to custom fonts, you can read more about custom design fonts on wordpress.

Mục Lục

Adding a Google Web Font to Blogger

1. Check out the Google Web Fonts Directory and pick a font that you like.
2. You can add fonts to your collection or just select one to use.
3. Then you can choose the styles of the font you want.
4. It will give you the code to integrate the font which looks like this

<link href='http://fonts.googleapis.com/css?family=FONTNAME' rel='stylesheet' type='text/css'>

We need to close the code to prevent errors. To do this add a / to the end before > so that the code looks like this

<link href='http://fonts.googleapis.com/css?family=FONTNAME' rel='stylesheet' type='text/css'/>

5. Now log into your Blogger account. Go to Template > Edit HTML. Find <head> and below it paste the edited code to embed the font.

6. Google Web Fonts will also provide you with the CSS for the font which will look something like this

font-family: 'FONTNAME';

You can use this for any element on your blog. Remember CSS is written like selector { property: value; }. To use the font as your post title, find </b:skin> in your HTML. Can’t find it? Check out this post. Above </b:skin> paste the following and change the value for your font. Use the same method to change the font of other elements by using the correct selector.

h3.post-title {font-family: 'FONTNAME';}

Adding a Google web font or custom font to self-hosted WordPress

Adding Google Web Fonts to Self Hosted WordPress is pretty much the same. Put the first piece of code between the head tags in your header file. You do not need to close the code. Add the second code to your stylesheet and style different elements using the same method. If using custom fonts, host the fonts yourself and link to them as shown in the tutorial below.

Adding a custom or third party font to Blogger that isn’t a Google Web Font

UPDATED FEB 2015 to reflect new changes on Dropbox

1. First, make sure you have the correct permissions and licensing to use the font. Normally you do need a commercial license when using fonts on blogs so it’s best to double check with the creator. Typically you can’t use fonts on templates that you sell either, but again it’s important to check with the creator. Good places to find fonts are DaFont, FontSquirrel and UrbanFonts. Download the font you want, it will usually be in OFT or TTF format. Sometimes they will provide you with a webfont, if they do you can skip the next step.

2. If you don’t have a web font, you can convert the font using FontSquirrel WebFont Generator and download the kit. Unzip it if necessary.

3. Set up a pro account on Dropbox. Upload each of the fonts there to a folder, it’s important not to alter this later on. If you have an older free account that has a public folder, you can use that instead. You can also use Google Drive but it’s more difficult to get the correct URL you need.

4. Click on each font > share link… > get link. Note the URLs in a text file. Here is an short tutorial showing this process, it has slightly changed since it was recorded but the process is the same.

5. Open the .css file you got in the kit download in step 2. You need to open the file in a text editor such as TextEdit, TextWrangler, SimpleText, TextPad or even NotePad. You’ll see code similar to below. Edit the URL’s so that they link to the fonts on your Dropbox like shown.

@font-face {
font-family: 'FONTNAME';
src: url('THE-URL-TO-YOUR-FONT/FONTNAME.eot');
src: url('THE-URL-TO-YOUR-FONT/FONTNAME.eot?#iefix') format('embedded-opentype'),
url('THE-URL-TO-YOUR-FONT/FONTNAME.woff') format('woff'),
url('THE-URL-TO-YOUR-FONT/FONTNAME.ttf') format('truetype'),
url('THE-URL-TO-YOUR-FONT/FONTNAME.svg#FONTNAMEregular') format('svg');
font-weight: normal;
font-style: normal;
}

6. On Blogger, find ]]></b:skin>. Copy the modified code from the .css file in the webkit folder and paste it above ]]></b:skin>.

7. You can now change the font of elements on your blog by adding CSS above ]]></b:skin>. To change the post title font use the following

h3.post-title {font-family: 'FONTNAME';}

or search for the following code in Template > Edit HTML

h3.post-title, .comments h5 {

add your font to the beginning of the values like so

h3.post-title, .comments h5 { font: 'NEW FONT', arial, other default fonts; }

Not working? Common Issues

I’ve noticed two common issues from comments and emails I’ve received regarding this post. Please check these carefully. I do provide a tweaking service here for adding fonts if you are having trouble and don’t want to do it yourself.

1. Make sure you are using the correct URL from Dropbox, Google Drive, your own hosting, etc. The link should bring you to the font file.

2. The other issue is incomplete code before the font code. Go to Template > Edit HTML and find ]]></b:skin>. Above this, you will see the code for changing the font like so

 @font-face {
    font-family: 'FONTNAME';
    src: url('https://dl.dropboxusercontent.com/u/000000000/FONTNAME.eot');
    src: url('https://dl.dropboxusercontent.com/u/000000000/FONTNAME.eot?#iefix') format('embedded-opentype'),
         url('https://dl.dropboxusercontent.com/u/000000000/FONTNAME.woff') format('woff'),
         url('https://dl.dropboxusercontent.com/u/000000000/FONTNAME.ttf') format('truetype'),
         url('https://dl.dropboxusercontent.com/u/000000000/FONTNAME.svg#FONTNAMEregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

h3.post-title {font-family: 'FONTNAME';}

]]></b:skin>

Check above @font-face to make sure any previous code is closed. By closed I mean has an end bracket }. Complete CSS code should look like this