About Google Fonts:

GoogleFonts is an open source font directory site hosted by Google, provides popular Fonts in a hosted application programming interfaces for web fonts with free of charge.

Also Read: How to Disable Country Specific URL Redirection in Blogger


Types of Google Fonts Usage:

There are 3 ways to use google fonts to your website.
1. The standard href link attribute with URL location.
2. @import url(siteURL);
3. Javascript
Google Web Fonts Logo - How to Use / Add Google Web Fonts to Blogger

You can use any fonts to your website in above 3 types mentioned. Just choose any one of the methods on fonts page which you would like to use. This tutorial explains how to add the Google Fonts for your web pages.

How to Use or Add Google Web Fonts to Blogger or Web Site

1. Goto to Google Fonts.

2. Choose any one of the fonts from the list.

3. Select 'Quick Use' option from that selected font.
Quick Use Selection in Google Fonts

Analyze the font with 'Impact on page load time' and make sure to select the best one for your website which is not affect your website. Select the type of usage which you want to use.
4. Copy google font's standard href link
Google Fonts Standard Href Link Selection
Example: <link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>

Before updating changes in your blogger template make sure you have backup your blog template.
5. Go to your blogger dashboard and then select template option.
6. Find of your template source code. Copy the generated code which you get it from the font selection page (refer step 4) and add or paste that code after <head> tag.
You Might Also Like: Hide / Remove URL Comment in Blogger

Example:

After updating google font your webpage source code will be like this,
<head>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>

Save the blogger template. Now goto your blogger or web site's homepage to see the updated font style with new look.

Do you have any doubts in how to add / use Google Fonts to your blogspot blogger just leave a comment.

0 comments:

Post a Comment

 
Dine Tricks © 2014. All Rights Reserved. Powered by Blogger
Top