Open source fonts are certainly not new, but as support for open source fonts continues to grow, the days of being limited to using only Arial and Verdana on the Internet are finally disappearing! The same goes for Times New Roman, Courier New, Trebuchet, and Tahoma. There are now hundreds of free fonts available, from various sources, for use on your website with new ones being continuously added to the mix.
Why Use Open Source Fonts?
One, for SEO; you can now use search-engine-friendly fonts instead of creating images of those typefaces. Two, for speed; using searchable fonts is not only better for SEO, but downloading fonts is quicker than downloading images. And finally, for the obvious reason, for visual interest; who isn’t ready for better looking websites?
How is it Done?
With the use of open source fonts such as Google Web Fonts, you can now add beautiful web fonts to any website by simply using a specific stylesheet link in your HTML document, then referring to that font in a CSS style. Below is an example of how to use the Tangerine web font.
Coding Example:
To use the web font, first add a stylesheet link:
<link rel=”stylesheet” type=”text/css” href=” http://fonts.googleapis.com/css?family=Tangerine“>
Then either use a css class:
.yourclassname {“font-family: ‘Tangerine‘, serif;”}
Or an inline style to call your font:
<div style=”font-family: ‘Tangerine‘;”>An Example of an Open Source Font!</div>
Does it Work in All Browsers?
Not all browsers support open source fonts yet, but their support is growing. Only older browsers, such as Internet Explorer 5, as an example, will not work.
Therefore, until there is full support in all browsers, it may still be a good idea to use “graceful degradation.” This means, that if a browser cannot display your desired font, then it will present the font you declare to use as a backup. And if consistency is important, then by picking fonts that are similar in looks, visual size, or spacing, your website will “degrade gracefully.” In other words, viewers in unsupported browsers will never know what they are missing, but your website will still display correctly in its formatting of the layout even though it may not be your preferred look.
Where Do I Get Open Source Fonts?
Here are some of the leading developers in open source fonts and links on where to get them:
Google Web Fonts: http://www.google.com/webfonts
The League: http://www.theleagueofmoveabletype.com/
Open Font Library: http://openfontlibrary.org/
Free Font Manifesto: http://www.designwritingresearch.org/free_fonts.html
Vitaly Friedman’s Font List: http://www.alvit.de/blog/article/20-best-license-free-official-fonts
Endless Possibilities, but Please, Be Mindful!
Just because you can doesn’t mean you should, is the answer to “can I use as many fonts as I want?” Please, still use good design techniques and do not overload the viewer’s visual experience with too many fonts! Too busy is still too busy!
The good news is that with each typeface having a personality of its own, this resource adds yet another avenue to complement and enhance your website. And with so many fonts now available, endless possibilities continue to grow in creating a unique and enriching visual experience for the Internet.