What are web fonts?
When designing for offline media like brochures, billboards, press advertisements, etc., a designer can choose from a wide variety of fonts — or typefaces to be more accurate. However, not all fonts can be used while designing websites. Fonts that can be rendered on web browsers as text (not images) are generally referred to as web fonts.
Standard Web Fonts
Not everyone realizes that all fonts or typefaces cannot automatically be used for designing websites. Another common myth is that standard web fonts work across browsers and operating systems. Fact is, each operating system has its own set of standard web fonts that can be rendered on browsers running on that operating system. Below is a list of standard web fonts by operating system:
|
Another less known fact is that, from HTML 4.0 onwards the <FONT> tag has been deprecated. That means, you can no longer code web fonts through HTML. The only way to set fonts for a website is using CSS using the following syntax:
body { font-family: “new century schoolbook”; }
or
<body style=”font-family:new century schoolbook;” >
Custom Web Fonts
For many years, web designers wished they could use custom fonts while designing websites. As bandwidth improved to allow the use of more images on websites, web designers started using custom fonts in the form of images. However, this meant that search engines understand these as text and could only see these as pictures. With the emergence of Flash and JavaScripts as web design tools, web designers found new means of using custom fonts in their web designs. These too were not the same as using default fonts and this wasn’t a search engine friendly solution.
The emergence of cascading style sheets allowed web designers a means of embedding custom fonts in the CSS and use them in website designs. Today, there are a number of free and paid web fonts that web designers can use for designing websites.
Resources for Custom Web Fonts
There are a number of custom web fonts that you can use while designing websites. You have a choice of a number of free and paid custom web fonts. Below is a list of some of the more popular websites that you can get custom web fonts from:
- Google Web Fonts: The Google Web Fonts site is a content delivery network (CDN) for a large number of free to use custom web fonts.
- Font Squirrel: Font Squirrel provides a number of web fonts that are free for use in web design.
- Typekit is an Adobe website that allows you to purchase custom web fonts for your website.
A few of the other popular web font sites include:
- Fontdeck
- Fonts.com Web Fonts
- Fonts Live
- Kernest
- Typekit
- Typotheque
- Web FontFonts
- Webfonts at MyFonts
- WebINK
- Webtype
Good Web Design is More than Creative Fonts
There is more to good web design than just creative web fonts. Imbalanced use of custom web fonts can result in gaudy websites that are not easy for visitors to read. Good web design calls for using the best possible fonts that enhance the aesthetic value of a website. Working with a professional web design company like Flying Cow Design is one way to ensure that your website has overall design balance — with or without the use of custom web fonts. Talk to us today about your web design needs.
CEO, Flying Cow Design
Attended University of Auckland
Lives in San Francisco Bay Area
