Blogger Tutorial - Google Web Fonts



During the weekend I found an awesome site (from Google of course) that they have a big data base of free web fonts available for use. 

About Google Web Fonts
Google Web Fonts makes web fonts quick and easy to use for everyone, including professional designers and developers. We believe that there should not be any barriers to making great websites.
Our goals are to create a directory of core web fonts for the world and to provide an API service so that anyone can bring quality typography to their webpages.
The API service runs on Google's servers. They are fast, reliable and tested. Google provide the service free of charge. It is possible to add Google Web Fonts to a website in seconds.
A web built with web fonts is a web that is more beautiful, more readable, more accessible and more open. - google webfonts
This websites allows you to grab fonts quickly by clicking the "Quick-use" button at the bottom of the font to grab the css code.


 This is how you install the fonts to blogger: ( it took me a while to figure it out...)

Go to template> edit html:

then search for /body

enter before the /body the Java script code
it will look something like this:

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Chango::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>



go to the post you are working on, and in the HTML, replace your existing font with

font-family: 'Chango', cursive;


 The one cool thing about this is is that it also shows how long it will take to load your font with their speedometer!



 Hope you found this useful!

No comments:

Post a Comment

Followers

Total Pageviews