Lifecode

Google Fonts, or more popularly known as Google Web Fonts, provides a great collection of open source licensed (can be used commercially and non-commercially) true-type fonts. My favorite is Droid Sans, the font I’m currently using now sitewide.

Because I love Droid Sans, I want to use it everywhere. Even in my school projects. I just finished a project (that is due tomorrow) that demonstrates HTML frames. And I wan’t (of course) to use Droid Sans as the main font for the web page. And if I used the font as I regularly do:

<link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular&amp;subset=latin' rel='stylesheet'> 

The font won’t be viewable offline. So the solution for this, is to download the font and use the CSS Google recommends. Take a look here.

@media screen {
@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: normal;
  src: local('Droid Sans'), local('DroidSans'), url('http://themes.googleusercontent.com/font?kit=s-BiyweUPV0v-yRb-cjciC3USBnSvpkopQaUR-2r7iU') format('truetype');
}
}

But how do we download the font? That’s easy look at the url('...'):

src: local('Droid Sans'), local('DroidSans'), url('http://themes.googleusercontent.com/font?kit=s-BiyweUPV0v-yRb-cjciC3USBnSvpkopQaUR-2r7iU') format('truetype');

Just enter that URL to your browser, and viola!

Now that we got our font, we use the CSS, and we modify it a little bit:

@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: normal;
  src: local('Droid Sans'), local('DroidSans'), url('path/to/DroidSans.ttf') format('truetype');
}

So this works for the latest stable versions of Chrome, Firefox, Opera, Safari, and.. Wait.. It’s not working in IE8. This is because IE lte 8 only accepts EOT type fonts. So how do we fix this? I’m not an IE user, but a big part of the Internet population uses IE, so we do not have a choice.

Good news is, you can convert TTF fonts to EOT. After that, save the file on the same directory where our TTF font is, and add it in the CSS.

@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: normal;
  src: url('path/to/DroidSans.eot');
  src: local('Droid Sans'), local('DroidSans'), url('path/to/DroidSans.ttf') format('truetype');
}

Now, you have to remember that you have to place this on the top of your CSS document. Then you can just use this as a regular font in CSS:

body {
	font-family: 'Droid Sans', Arial, sans;
	color: #666;
}

Make sure, that the path to the font is always relevant to the CSS file. And that’s all for now. :)