Google Font API? Hmmm..
So Google has announced a new API to help make the web a more beautiful place when it comes to fonts. Most web developers (should be all web developers) know, that there are only a few web safe fonts that are available to use. They include the likes of:
- Georgia
- Times New Roman
- MS Serif
- Verdana
- Arial
- Arial Black
- Impact
- Tahoma
- Century Gothic
- Lucida Sans Unicode
- Trebuchet MS
Before all you designers jump on me, I am going to fully admit that I am pushing the envelope on a few of these, and that is the entire point. By definition Web Safe fonts are:
Web-safe fonts are fonts likely to be present on a wide range of computer systems, and used by web content authors to increase the likelihood that content will be displayed in their chosen font. If a visitor to a website does not have the specified font, their browser will attempt to select a similar alternative, based on the author-specified fallback fonts and generic families.
As you can see we are only talking about fonts that are “likely” to be on a wide range of computers but are not guaranteed to be on any of them. This is a serious impediment when it comes to designing for the web, because designers have to limit their creativity or be forced to use an alternate method like these.
Method 1 – Use Images
If your design has a very unique look, this means it will probably also include a very unique font. One way to preserve your design is to slice each and every instance of the unique font into an image. Developers would then insert the image in place of text. Although the web site ends up looking like the original design, it now has some serious restrictions. First and foremost that image text is now no longer editable, meaning that every time the text needed changing a new image would need to be created. Secondly, this text is now not machine readable, which presents a problem for both screen readers and search engines alike.
Method 2 – Using SIFR or Cufon
Even though these two methods use different technology, one uses Flash while the other uses JavaScript, they are very similar in nature. Both techniques require the developer to embed the font, and then replace existing text with generated text. Up until now , I have used Cufon the most, simply because I was noticing some speed issues with SIFR, one nice thing about these techniques are that they leave the text editable and machine readable. Both techniques are valid text replacement techniques and can be explored more at Cufon or SIFR.
Method 3 – Using @font-face
Although @font-face is a CSS rule implemented in Firefox’s latest 3.5 browser this is the same technique that Google is endorsing with their API. Of course, they are not calling it that, but the implementation is the same. To use @font-face you would need to upload the font to your server (or any internet accessible server) and call it in your CSS files, if the end user has the font on their local machine already the site will use that, if not the site will use the font on the server. Here is an example:
@font-face {
font-family: MyHelvetica;
src: local("Helvetica Neue Bold"),
local("HelveticaNeue-Bold"),
url(MgOpenModernaBold.ttf);
font-weight: bold;
}
While this technique is certainly a cross-platform, cross-browser, lightweight method it may not be entirely legal. Font-developers spend a lot of time creating their products, and therefore need to be reimbursed accordingly, by offering the font freely on your server you MAY be breaking some copyright laws. Since I am not a lawyer, I will not get into that, I am just saying you should know the facts.
Method 4 – Google Font API
So to the rescue comes Google (yet again), like they did for JavaScript libraries Google is offering to host the fonts on their server. The benefits are obvious, you save on bandwidth, technical expertise and possible legal problems… sounds good to me. Implementation could not be easier either. It can be done in three simple steps:
- Surf over to Google’s font directory and see if you could make use of any of the available fonts
- Grab the code to embed the head section of your website, here is an example
<link href='http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'> - Style the desired text by using CSS, here is an example
h1 { font-family: 'Cantarell', arial, serif; }
And that’s it super lightweight and a no-brainer to implement. Jeff at Nettuts has a great screencast on how to do this as well.
Summary
I am actually really excited about this, while I have to admit that Google’s existing font directory is a bit lean, I also have no doubt that this will grow quickly. The other nice thing is that these fonts will also be cached in a client’s browser, meaning that if the font is used on a site you have already visited, you won’t have to download the font a second time it will instead be loaded from the browsers cache. This will save on both speed and bandwidth.
So what do you say? Are you going to use this?
No related posts.
