Information Technology Reference
In-Depth Information
Google Web Fonts
You might remember when we grabbed the Droid Sans font from Google Web Fonts in
one of our earlier chapters. At the time, we did not go into much detail about Google
Web Fonts and just how incredible a resource it is for designers and developers alike.
One of the most intriguing aspects of using Google Web Fonts (shown in Figure 8-6)
with your next project is that all of the fonts are open source and can be used by anyone
without the fear violating a license and owing someone money.
Figure 8-6.
The landing page for the newly designed Google Web Fonts site
One of the biggest complaints I hear about developers who are against using web fonts
is that fonts can tend to be a little bulky in weight, which does increase loading times.
While this can be annoying on a mobile device due to limited bandwidth, Google has
taken this into account and created an easy method to shrink the size of the font file that
is loaded into your user's browser.
Take a quick look at Listing 8-2. Here we have the basic HTML markup needed to add
the Chivo Google Web Font to our web application.
Listing 8-2.
Loading a non-optimized version of the Chivo font into our user's browser.
<link href='
http://fonts.googleapis.com/css?family=Chivo'
rel='stylesheet'
type='text/css'>
