Monthly Archives

July 2012

Google Web Fonts to the Rescue

If you are unfamiliar with the Google Web Fonts project / site – it is the absolute best place for putting together, sorting through and organizing collections of fonts to use for whatever your project needs are.

Here is one of my personal favorite sets that I was able to place together (and as you can see, it is altogether to easy too create a URL to represent your collection for later use)

Try this link at your delightful peril!

http://www.google.com/webfonts/#ChoosePlace:select/Collection:Unkempt|Trade+Winds|Economica|Michroma|Quicksand|Wire+One|Tulpen+One|Exo|Advent+Pro|Metrophobic|Homenaje|Six+Caps|Megrim|Jura|Open+Sans|Dorsa|Open+Sans+Condensed:300|Quantico

More than that, the site is fast and if you decide you’d like to use these fonts for your web sites or web applications, by clicking on Use, Google will give you you several options to use in your CSS / JavaScript code.

For example, if you were crazy enough to use the 18 aforementioned fonts, Google happily gives us these 3 options.

Standard


<link href='http://fonts.googleapis.com/css?family=Unkempt|Trade+Winds|Economica|Michroma|Quicksand|Wire+One|Tulpen+One|Exo|Advent+Pro|Metrophobic|Homenaje|Six+Caps|Megrim|Jura|Open+Sans|Dorsa|Open+Sans+Condensed:300|Quantico' rel='stylesheet' type='text/css'>

@import

@import url(http://fonts.googleapis.com/css?family=Unkempt|Trade+Winds|Economica|Michroma|Quicksand|Wire+One|Tulpen+One|Exo|Advent+Pro|Metrophobic|Homenaje|Six+Caps|Megrim|Jura|Open+Sans|Dorsa|Open+Sans+Condensed:300|Quantico);

JavaScript

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Unkempt::latin', 'Trade+Winds::latin', 'Economica::latin', 'Michroma::latin', 'Quicksand::latin', 'Wire+One::latin', 'Tulpen+One::latin', 'Exo::latin', 'Advent+Pro::latin', 'Metrophobic::latin', 'Homenaje::latin', 'Six+Caps::latin', 'Megrim::latin', 'Jura::latin', 'Open+Sans::latin', 'Dorsa::latin', 'Open+Sans+Condensed:300:latin', 'Quantico::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>

Fast, easy, no-hassle, simple, and elegant. You couldn’t ask for more (except possibly a wider selection of fonts, but I’ll not look a gift horse in the mouth!)

Also Google Web Fonts will even tell you how heavy the load will be on your pages, on-the-fly as you select and de-select options such as fonts and font-weights. It really is incredible and useful. Enjoy!