How to Use / Add Google Web Fonts to Blogger Blog

<div dir="ltr" style="text-align: left;" trbidi="on"> <h2 style="text-align: left;"> <span style="font-size: large;">About Google Fonts:</span></h2> <div style="text-align: left;"> <div style="text-align: justify;"> <blockquote class="tr_bq"> <b>GoogleFonts </b>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. </blockquote> </div> <h4 style="text-align: justify;"> Also Read: <a href="http://dinetricks.blogspot.com/2014/04/disable-stop-country-specific-ccTLD-redirection.html" target="_blank" title="Disable Country Specific URL Redirection in Blogger"><span style="font-weight: normal;"><span style="color: blue;">How to Disable Country Specific URL Redirection in Blogger </span></span></a></h4> <br /> <h3 style="text-align: justify;"> <span style="font-size: large;">Types of Google Fonts Usage:</span></h3> <div style="text-align: justify;"> There are 3 ways to use google fonts to your website.</div> <div style="text-align: justify;"> <blockquote class="tr_bq"> 1. The standard href link attribute with URL location.<br /> 2. @import url(siteURL);<br /> 3. Javascript</blockquote> </div> <div class="separator" style="clear: both; text-align: center;"> <a href="http://4.bp.blogspot.com/-HvibhBCqh58/U9KajVfi4tI/AAAAAAAAANg/c1nlmRShmEQ/s1600/google-web-fonts-logo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Google Web Fonts Logo - How to Use / Add Google Web Fonts to Blogger" border="0" src="http://4.bp.blogspot.com/-HvibhBCqh58/U9KajVfi4tI/AAAAAAAAANg/c1nlmRShmEQ/s1600/google-web-fonts-logo.jpg" title="Google Web Fonts Logo" /></a></div> <br /> 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 <b>Google Fonts</b> for your web pages. <br /> <br /> <h1 style="text-align: left;"> How to Use or Add Google Web Fonts to Blogger or Web Site</h1> <blockquote class="tr_bq"> 1. Goto to <a href="https://www.google.com/fonts" rel="nofollow" target="_blank"><span style="color: blue;"><b>Google Fonts.</b></span></a><br /> <br /> 2. Choose any one of the fonts from the list.<br /> <br /> 3. Select 'Quick Use' option from that selected font.</blockquote> <div class="separator" style="clear: both; text-align: center;"> <a href="http://4.bp.blogspot.com/-fDbeRam_71w/U9KdC3zAnjI/AAAAAAAAANs/Q5PzZeTF1Sk/s1600/fonts-quick-use.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Quick Use Selection in Google Fonts" border="0" src="http://4.bp.blogspot.com/-fDbeRam_71w/U9KdC3zAnjI/AAAAAAAAANs/Q5PzZeTF1Sk/s1600/fonts-quick-use.png" title="Quick Use Selection in Google Fonts" /></a></div> <br /> <div style="text-align: justify;"> 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.</div> <blockquote class="tr_bq"> 4. Copy google font's standard href link </blockquote> <div class="separator" style="clear: both; text-align: center;"> <a href="http://1.bp.blogspot.com/--nL-INq_JUY/U9Kd6cN2QEI/AAAAAAAAAN0/U3ZBabRU0R0/s1600/google-font-standard-href-link.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Google Fonts Standard Href Link Selection" border="0" height="165" src="http://1.bp.blogspot.com/--nL-INq_JUY/U9Kd6cN2QEI/AAAAAAAAAN0/U3ZBabRU0R0/s1600/google-font-standard-href-link.png" title="Google Fonts Standard Href Link Selection" width="640" /></a></div> <b>Example: <link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'></b><br /> <br /> <div style="text-align: justify;"> Before updating changes in your blogger template make sure you have <a href="http://dinetricks.blogspot.com/2014/04/backup-your-full-blogger-template.html" target="_blank" title="How to Backup Your Entire Blogger Template"><span style="color: blue;">backup your blog template</span></a>.</div> <div style="text-align: justify;"> <blockquote class="tr_bq"> <div> 5. Go to your blogger dashboard and then select template option.</div> </blockquote> <blockquote class="tr_bq"> 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 <span style="color: purple;"><b><head></b></span> tag.</blockquote> You Might Also Like: <a href="http://dinetricks.blogspot.com/2014/04/hide-remove-url-comment.html" target="_blank"><span style="color: blue;">Hide / Remove URL Comment in Blogger </span></a></div> <div style="text-align: justify;"> </div> <br /> <h4 style="text-align: justify;"> Example:</h4> <div style="text-align: justify;"> After updating google font your webpage source code will be like this,</div> <div style="text-align: justify;"> <span style="color: purple;"><head></span></div> <div style="text-align: justify;"> <span style="color: purple;"><link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'></span></div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> Save the blogger template. Now goto your blogger or web site's homepage to see the updated font style with new look.<br /> <br /> Do you have any doubts in how to add / use <b>Google Fonts</b> to your blogspot blogger just leave a comment.</div> </div> </div>

How to Use / Add Google Web Fonts to Blogger Blog

About Google Fonts: GoogleFonts is an open source font directory site hosted by Google, provides popular Fonts in a hosted applicatio...

Read more »