Google just introduced us its new Font API. I have played around a with it and I can assure you It’s the best and simplest way to use custom fonts I’ve ever seen.
It takes less than 10 seconds to install and use a new font, and gives you full control over the fonts even with CSS 3. One of the best features is that it’s pretty fast on time loading and supports Internet Explorer 6 (aka Lost Cause).
So here’s a quick tutorial on how to use the new Google Font API on your Blogger Blog.
This is the best and robust method to add custom fonts to your blogger blog. It uses the @font-face technique but you needn’t worry about the backend things. You can see a list of available Fonts at the Google Font Directory
When you select a particular Font, Google will provide you with the Embed Code which looks like
That is you have to change the code to something like:
Adding the Google CSS Embed Code
Now Go to your Blogger > Design > Edit HTML page
Find <head> and immediately below that line paste the edited Embed Code and save your template.
Using This Custom Font on your Template
You use this Custom Font in any of your CSS Font Definitions. For example if you want to change the Post Title Font to this one, then you can use the following CSS code
You can alter other fonts in your Template by modifying the font-family definitions in your template.
How to use Multiple Custom Fonts in your Blogger Template
When you use multiple Custom Fonts, then there is no need to add the Google CSS embed codes multiple times.You can load multiple fonts using a single line of code.
For example if you are planning to use 3 custom Fonts Tangerine,Inconsolata, Droid Sans, then you can load all these three fonts using a single embed code
Now to apply these fonts on your template, you can use these in your template CSS
For example you may use something like
Extra Settings
By Default the Google API provides the Regular version of the Font. If you need specialised versions like bold, italic or bold and italic, then you have to append :b , :i or :bi to the font name in the google font embed code.
For example, if you need the blold + italic version of the Tangerine font, then you should have used the following embed code
You might also want to refer the Google JavaScript Web Font Loader, which provides you with more Fonts and Font Providers.
These Web Fonts would be much useful for Non-English Blogs, if the other language Fonts get added to the Font Directory.
It takes less than 10 seconds to install and use a new font, and gives you full control over the fonts even with CSS 3. One of the best features is that it’s pretty fast on time loading and supports Internet Explorer 6 (aka Lost Cause).
So here’s a quick tutorial on how to use the new Google Font API on your Blogger Blog.
This is the best and robust method to add custom fonts to your blogger blog. It uses the @font-face technique but you needn’t worry about the backend things. You can see a list of available Fonts at the Google Font Directory
When you select a particular Font, Google will provide you with the Embed Code which looks like
<link href='http://fonts.googleapis.com/css?family=FontName' rel='stylesheet' type='text/css'>Copy out this code and you have to modify it by changing > at the end of the code to />
That is you have to change the code to something like:
<link href='http://fonts.googleapis.com/css?family=FontName' rel='stylesheet' type='text/css'/>
Adding the Google CSS Embed Code
Now Go to your Blogger > Design > Edit HTML page
Find <head> and immediately below that line paste the edited Embed Code and save your template.
Using This Custom Font on your Template
You use this Custom Font in any of your CSS Font Definitions. For example if you want to change the Post Title Font to this one, then you can use the following CSS code
h3.post-title {font-family: 'CustomFontName', serif;}In This definition serif is a fallback font which will be used in case the something bad happened when loading the custom font. (It is a safe practice to include at least one Fallback font and it will help in tackling unexpected behaviours) After editing the above CSS with the proper Custom Font name,add the code above the closing ]]></b:skin> tag in your template.
You can alter other fonts in your Template by modifying the font-family definitions in your template.
How to use Multiple Custom Fonts in your Blogger Template
When you use multiple Custom Fonts, then there is no need to add the Google CSS embed codes multiple times.You can load multiple fonts using a single line of code.
For example if you are planning to use 3 custom Fonts Tangerine,Inconsolata, Droid Sans, then you can load all these three fonts using a single embed code
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans"/>ie, just separate the multiple fonts by a |
Now to apply these fonts on your template, you can use these in your template CSS
For example you may use something like
h3.post-title {font-family: 'Tangerine', serif;}
#header h1 {font-family: 'Inconsolata', serif;}
.sidebar h2 {font-family: 'Droid Sans', serif;}
Extra Settings
By Default the Google API provides the Regular version of the Font. If you need specialised versions like bold, italic or bold and italic, then you have to append :b , :i or :bi to the font name in the google font embed code.
For example, if you need the blold + italic version of the Tangerine font, then you should have used the following embed code
<link href='http://fonts.googleapis.com/css?family=Tangerine:bi' rel='stylesheet' type='text/css'/>If you like to play around with codes , then refer the Google Font API Documentation
You might also want to refer the Google JavaScript Web Font Loader, which provides you with more Fonts and Font Providers.
These Web Fonts would be much useful for Non-English Blogs, if the other language Fonts get added to the Font Directory.
Tags:
Blogger Tutorial
