Google has recently released a tool to help make the typography in websites prettier. The Google Font API — currently in beta — is a super-easy, free way to incorporate non-standard fonts in a website, and still maintain accessibility and search-engine friendliness.
You can see it in action on my website, which uses the Lobster font in the headers.
Traditionally, a designer putting together a website has been limited in font choices to what is installed natively on end users’ machines. I could tell a browser to display a headline in any font I want, but if the person viewing it doesn’t have that font on their computer, they’ll see a common font like Times or Arial. So that’s not a lot of variety in the fonts chosen for site design.
I could choose to let users load the font from my server, but that gets into legal issues with licensing. Plus, it can be complicated and confusing to get a system like that set up.
Google has made embedding pretty font super easy. It’s literally a two-step process.
To get started, visit the Google Font API website. Then click on “Font Directory” to see a list of all the fonts available. There’s not a lot to choose from right now, but everything there is open source and can be used freely in your projects. Just find a font you like, and click “embed font.”
Google will give you a short snippet of code to insert into your site’s header,and then you just use the font name in your CSS as you would any other font. The API generates the necessary CSS to display the font on the user’s browser.
