So I ran into this little gem today while trying to fix a layout bug I was getting from custom fonts being loaded on this page after everything else was rendered. Although it did not solve the problem, Google’s font api is a pretty handy tool for anyone using web fonts. What it provides is a simple API that helps you add web fonts to web pages without all the fuss of the @font-face tag. It also provides access to a some popular web fonts out there like Droid Sans, served right from google servers. Sounds pretty cool eh? Here’s a simple example of how to enable a web font like Droid Sans into your webpage.
1. Add this above your other linked css documents in the <head> of your html document:
<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
2. Declare the embedded font anywhere in your css like so, and your good to go:
h1 { font-family: 'Droid Sans', arial, serif; }
It’s that easy! and theres more… Google and Typekit worked together to create a Javascript library for loading fonts with even more control over everything called WebFont Loader. What’s cool about this library is the ability to use multiple web-font providers like google, Typekit, or your own custom one. Another big plus of using this library is a way to control font styles before and after the actual font is loaded, which means your site’s text can be made visible quicker as the fonts load. After reading about this more, it might prove to be useful in solving the problem I was having with the layout rendering on this page.
Wow, thanks Tylrr, you really helped me out! You’ll be seeing this in all my word from here on out!
PS. Still doesn’t beat Fortran though…