«
»

Get started using advanced web fonts today

I saw this example on a blog today:

Studying the code, it turns out this is just clever use of Google’s font api. What you essentially do is to add this to your <HEAD> element:

<!-- Google Fonts --> 
<link href='http://fonts.googleapis.com/css?family=Cabin Sketch:bold' rel='stylesheet' type='text/css' /> 
<style type="text/css" media="screen"> 
  h1 { font-family: 'Cabin Sketch', arial, serif; } 
  .entry-title { 
    font-family:'Cabin Sketch'; 
  } 
</style>

Now the stylesheet referenced takes care of the rest. It’s as simple as that!

Browser support

The best part of this, is that it works for all modern browsers, and also for old IE versions (down to IE6).

From googles FAQ:

What browsers are supported?

The Google Web Fonts API is compatible with the following browsers:

  • Google Chrome: version 4.249.4+
  • Mozilla Firefox: version: 3.5+
  • Apple Safari: version 3.1+
  • Opera: version 10.5+
  • Microsoft Internet Explorer: version 6+

Does the Google Web Fonts API work on mobile devices?

The Google Web Fonts API works reliably on the vast majority of modern mobile operating systems, including Android 2.2+ and iOS 4.2+ (iPhone, iPad, iPod). Support for earlier iOS versions is limited.

 

 

Bandwidth considerations

One word of caution: Think twice before adding a lot of extra bytes to your web application. You should only add assets to it if it really makes a difference for your end users!

 




	
					
				

					
						This entry was posted by Jesper Rønn-Jensen						 
						on Friday, February 24th, 2012 at 17:00 (GMT-1)						and is filed under Web Development, Web Standards.
						You can follow any responses to this entry through the RSS 2.0 feed. 
						
													Both comments and pings are currently closed.			
						
												
					
				

	
			


		



		
	


	
6 Responses to “Get started using advanced web fonts today”


	
    

	
		
  1. 
			Martin Stjernegaard Says:
						
    

			March 14th, 2012 at 14:54 (GMT-1) 

			
    Hi Jesper
    

    I see that you’ve used the example from our site uxcampcph.org – thanks :)
    

    I have a few notes that is necessary to add and a quick useful one. We are using wordpress for our site and the use of Google Web Fonts is through a plugin called “WP Google Fonts – http://wordpress.org/extend/plugins/wp-google-fonts/“. It’s not developed by us so we can’t really claim the credit for it :) Just wanted to point that out.
    

    On a second note, we’ve experienced that the fonts doesn’t render perfectly on PC’s. On mac they render as they should but it looks a bit messy on PC’s. This is worth considering before using Google Web Fonts.
    

    Maybe others have had the same issue with the rendering?
    

		
    2. 

	


	
		
  2. 
			Christian Turk Says:
						
    

			March 15th, 2012 at 16:02 (GMT-1) 

			
    Nice article! I use the Google Web Fonts too!
    

    But there is a problem with the Internet Explorer lower than version 9. It is important too implement the font css before all the other stylesheets for proper work.
    

		
    3. 

	


	
		
  3. 
			GADEL Says:
						
    

			March 16th, 2012 at 03:52 (GMT-1) 

			
    Some of my hosted WordPress blogs use Web fonts. It makes reading and typography awesome.
    

		
    4. 

	


	
		
  4. 
			Peter Says:
						
    

			May 11th, 2012 at 15:21 (GMT-1) 

			
    It works awesome in firefox & chrome but have some problems in IE if these are solved then nothing is best.
    

		
    5. 

	


	
		
  5. 
			Ben Says:
						
    

			June 20th, 2012 at 21:13 (GMT-1) 

			
    Brilliant! Beats tahoma and times new roman forever!
    

		
    6. 

	


	
		
  6. 
			Alex Lambert Says:
						
    

			July 2nd, 2012 at 15:29 (GMT-1) 

			
    Internet explorer not playing the game it seems, older versions below 9 anyway. apparently there is a shopping cart site based in australia that actually increases your bill when you come to check out if you use ie8 or below. This was specifically to re-coup the costs of the extra development taken so that the site would render correctly in IE 8 and below!
    

    I also think that the additional bandwidth consideration isn’t that significant if using a great font adds to the overall design!
    

		
    7.