What Are Custom Fonts & How to Use Google Custom Fonts in Your Blog

Google has recently launched a new service which lets you easily use amazing fonts in any blog. These fonts are powered by JavaScript code which is hosted by Google so you don't have to worry about it. Currently, only 18 fonts are available but we can expect that number to grow. For example, this text is written in Lobster font. These fonts are search engine friendly and work in all browsers.

How to Add Google Fonts in Blogger Blogs

Google has made it really easy for anyone to embed a font in the blog. Just follow these steps:

1- Go to Google Font Directory.

2- Select a font from the list there, I'm using Lobster web font by Pablo Impallari.

3- On the next page, click Get the code link.

4- You'll see some code which looks something like this:

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

Note: This is the code we need but when I copied and used this code in Blogger, an error occurred. To deal with the error, you have to close the link tag by adding /(slash) right before > in the above code and it would look something like this:

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

So, whichever font you use, just add a / before > in the code of that font. For now, copy the above code and go to your Blogger account.

5- Go to Design then Edit HTML tab and find </head>. After that, paste the step 4 code right before </head> tag. The result would look something like this:

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

After adding the code, save your template.

6- Now, we can use this font in headings and text. For example, if you want to use the web font in posts then use some code like this:

<span style="font-family: Lobster;">Any text here will be displayed by a web font like Lobster in this tutorial.</span>

How to Use Google Fonts in Posts/Sidebar/Header Headings?

You can also use the embedded web font in any heading of the blog. All templates have different structure that's why I can't write about each and every template. You can post your blog address in the comments and tell me in which part of the blog you want to use an embedded web font. I'll try to reply as soon as possible, thanks.