Google Web Fonts

| | Comments (2) |

In website design, you are restricted to a limited set of text fonts. You have to design based on the most common fonts people have installed. The complex data for drawing the font doesn't come across the web, but rather from the local operating system. You control this with style code that looks something like this:

body {font:15px arial, helvetica,sans-serif;}

Which means, try to use areial and if they don't have that, use helvetica, and if they don't have that use whatever san serif default font the reader has.

The only way to use a creative display font would be to be to make it a graphic and display it as an image, which would not be text and would not be sizable or searchable. It wouldn't really be a font.

As bandwidth has gotten greater... everyone is now watching YouTube and streaming Pandora... the concern about being so efficient with text has diminished. Why not send some extra font data with the page so everyone can read whatever font you want to use?

Google Web Fonts does just that. They have a nice little shopping tool that helps you browse different styles of fonts and then "check out" with the code to put at the top of your website. It is a specialized stylesheet call back to google fonts.

<head>
<link href='http://fonts.googleapis.com/css?family=Schoolbell' rel='stylesheet' type='text/css'>

After trying on some different fonts, I settled on a general text font for Mac5's home page called Cabin and then a fun display font for JEB:LOG titles called Schoolbell.

JEB_LOG with Schoolbell.png

What's he building in there?


Categories

2 Comments

Mom said:

Since I don't have a web site, could I just add one of the fonts to my fonts on my computer?

Jeb said:

You *do* have a website, Mom. Your blog is a website. Pick out a font, and I'll use it at the top of your website like I did on JEB:LOG with the Schoolbell font.

Leave a comment

About this Entry

This page contains a single entry by Jeb published on September 10, 2011 12:54 PM.

Canon PowerShot A630 circa 12-23-2006 was the previous entry in this blog.

It's the end of R.E.M. as we know it. is the next entry in this blog.

Find recent content on the main index or look in the archives to find all content.

Powered by Movable Type 4.31-en

Good Reads

Flickr Badge

www.flickr.com
This is a Flickr badge showing items in a set called Wallet. Make your own badge here.