Web-safe fonts

Web-safe fonts are those fonts likely to be present on a wide range of computer systems, and are used by web content authors to increase the chance that content will be displayed in their chosen font. If a visitor to a website does not have the specified font, their browser will select an alternative — in the case of dingbat typefaces the alternative is unlikely to have similar characters at the same code points.

CSS Generic Font Families

The most safe option is to use the generic font families as defined by the CSS. These are: sans-serif, serif, monospace, cursive and fantasy. One of them should always be specified as a last resort for every "font-family" CSS property. Sans-serif is regularly specified in CSS as the default for generic font families, as sans-serif fonts are more easily readable on screens.Fact|date=July 2008

Examples

sans-serif
serif
monospace
cursive
fantasy

Microsoft's Core Fonts for the Web

Microsoft has started a Core fonts for the Web initiative. However, despite the name, only some of the fonts defined there are web-safe indeed. These are: Arial, Courier New, Georgia, Times New Roman, Verdana, Trebuchet MS (more recently) and Lucida Sans (to some extent).

Examples

Arial
Courier New
Georgia
Times New Roman
Verdana
Trebuchet MS
Lucida Sans
Note: These examples may not display properly in all browsers/operating systems

Unicode Fonts

Only two fonts available by default on the Windows platform, Arial and Lucida Sans, provide a wide Unicode character repertoire. A bug in Verdana (and the different handling of it by various user agents) hinders its usability where combining characters are desired.

Dingbats

No dingbats font, including Webdings, can be considered web-safe.

Workarounds

A common hurdle in web design is the programming of mockups that include non-web-safe fonts. There are a number of solutions for situations like this. One common solution is to "slice" out the text and reference the particular font along with a similar replacement. For instance, if a heading contains a Windows Vista-specific font, the programmer would write the code such that the heading is physical text (rather than an image) and references the particular font. If the font is not present on a viewer's computer, the website falls back on a similar font or set of fonts that are similar or are suitable replacements.

Another practice is to use image replacement techniques. These methods store the text in question as physical text and then overlay the text with an image containing the text typed out in the correct font. This is good for search engine optimization and aesthetic purposes, though the text cannot be selected (for say, copy and pasting). However it should be noted that Mozilla Firefox for instance has the option "Copy" on the right click contextual menu for a highlighted image which copies the alt attribute to the clipboard.

A new technique in the web design community is the use of Flash-based solutions such as sIFR. They work similar to image replacement techniques, though the text is selectable and rendered as a vector. The downside to this method is that the tools needed to create sIFR files are generally not readily available for free.

"This Digital typography-related article is a . You can help Wikipedia by plainlink|url=fullurl:FULLPAGENAME|action=edit expanding it".

External links

* [http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html A List of Web Safe Fonts]
* [http://dustinbrewer.com/fonts-on-the-web-and-a-list-of-web-safe-fonts/ Web safe fonts by operating system and type]