With the recent release of Google’s Font API, this seemed an appropriate time to address web fonts in the Tips & Tricks section. Fonts used for the web are in some ways more limited than the fonts available for print or electronic design. Web safe fonts used to be dependent on each browser’s settings; today there are numerous ways to incorporate specialty fonts into your website. While fonts are an integral part of graphic design, choosing fonts to use on the web is more complicated than choosing a font for purely aesthetic reasons. A handful of basic fonts, Arial, Times New Roman, Georgia, Verndana, Courier, and Helvetica are widely accepted across most browser platforms. Choosing a body font is pretty straight forward; but when it comes to headers, titles and other areas of the page you want to stick out it can be more complex. One option is to use an image. When you design your site (usually in Photoshop), simply crop the page to include only your title or header, then save the image for the web as a .jpg, .png, or .gif. Below is an example of an image of text.
You will notice that the text above cannot be highlighted, which means that it cannot be read by search engines. This is the biggest downfall of using images of text, plus the fact that editing the text will be much more involved than it would be otherwise, and the image takes up more space on your server than text would. The next option is to include the font you want to use in your web directory and point to it. This involves uploading the font and writing a code within the HTML of your page so that the font will be downloaded and visible by web viewers. Along the same lines is Google’s Font Directory, which is a set of fonts available for use without the need to upload the font to your server. This saves space and is a convenient solution to limited web fonts. The following text is an example of such.
Script Font
As you can see, this text is a similar scripted font with a shadow, and is completely selectable and readable by search engines. There are no extra files on my web server as Google is hosting the font. (The shadow under this text is achieved quickly and easily with CSS3.)
As a designer it is great to see Google taking this step. It is a convenient way to increase the number of fonts available to everyone on the web, and rumor has it that the font library will be growing quickly. So, be on the lookout for new and more varied fonts on your favorite websites! PS- As noted last week, we have implemented some new fonts here on the GetCreative website as well. What do you think of these subtle changes?