Fun with Fonts

One of the things I’ve mentioned in a past post was changing the font used on pages. For example ‘Lato’ a font available on google.com/webfonts

It’s similar to Tahoma in size and shape, but the spacing between the letters is nicer and the text width is thinner. For my eyes at least, I found it much nicer to read ‘Lato’ text than our usual font.

To use webfonts, add the following line to your style sheets

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url('http://themes.googleusercontent.com/font?kit=kcf5uOXucLcbFOydGU24WALUuEpTyoUstqEm5AMlJo4') format('woff');
}

This will tell the browser to load the font first from the local machine, and if it’s not found, then from Google servers.

Then you can treat the font like any other, just add it to the font-family configuration in your styles

Ex:

p {
  font-family: Lato, Tahoma, Verdana, Arial;
}