Web-safe fonts are present on most computer systems and are used on websites so that the content is displayed as closely as possible to the intentions of the designer. If a font is not present on a system, fallback fonts are used to ensure maximum compatibility. Developers begin with the font they want to display, then list other similar fonts in case the original is not available.
The following are the most common font combinations with their fallbacks:
Serif Fonts
Georgia, serif
“Palatino Linotype”, “Book Antiqua”, Palatino, serif
“Times New Roman”, Times, serif
Sans-Serif Fonts
Arial, Helvetica, sans-serif
“Arial Black”, Gadget, sans-serif
“Comic Sans MS”, cursive, sans-serif
Impact, Charcoal, sans-serif
“Lucida Sans Unicode”, “Lucida Grande”, sans-serif
Tahoma, Geneva, sans-serif
“Trebuchet MS”, Helvetica, sans-serif
Verdana, Geneva, sans-serif
Monospace Fonts
“Courier New”, Courier, monospace
“Lucida Console”, Monaco, monospace
The use of these fonts can really limit the design of a website. Through the CSS @font-face property, however, fonts can be uploaded to a server and displayed even if they are not installed on the end users’ system.
These web fonts require various file formats that work in different browsers:
Embedded OpenType (EOT)
Internet Explorer 4+ (introduced with CSS2)
Scalable Vector Graphics (SVG)
Safari 3+ and Opera 8+
TrueType/OpenType (TTF/OTF)
Firefox 3.5+, Opera 10+, Safari 3.1+, Google Chrome 4.0+, Internet Explorer 9+
Web Open Font Format (WOFF)
Firefox 3.6+, Google Chrome 5+, Opera Presto, Internet Explorer 9
One drawback of web fonts is that they require a different license for use than desktop fonts. There are various ways to obtain web font licenses. You can buy them directly from a publisher, such as MyFonts, or you can get them through subscription-based websites such as Typekit, Fontdesk or Fontspring (also offers a free section).
If you do not have the room in your budget to purchase a license, there are also many free web fonts available in every style. The following websites are your best bet for finding high quality, FREE web fonts:
Google Fonts
Image may be NSFW.
Clik here to view.
- Uses CSS to style fonts
- Font preview, filter and character map
- Open source fonts
- Fonts can be hosted via Google server or locally
- Font API and documentation are available
Adobe Edge
Image may be NSFW.
Clik here to view.
- Free and unlimited use
- Open Source fonts
- Uses javascript to serve the fonts
Font Squirrel
Image may be NSFW.
Clik here to view.
- Fonts are for commercial use
- Uses CSS to style fonts
- Font preview and character map
- Fonts have to be self-hosted
That’s a lot of fonts to browse. To make it easier for you, I’ve found some blog posts that narrow down some of the best web fonts available:
40 Excellent Free Fonts For Minimal Web Design Creation
25 Free Web fonts for Web Designers
20 Beautiful Web Fonts You Can Download For Free
The 30 best free web fonts
The post Web-Safe fonts and FREE Web fonts appeared first on Local Wisdom.