Web Safe Fonts: Wikipedia

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.

Contents  [hide] 1 CSS Generic Font Families 1.1 Examples 2 Microsoft's Core Fonts for the Web 2.1 Examples 3 Unicode Fonts 4 Alternatives 5 External links

[edit]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.^{[citation needed]}

Examples

sans-serif
serif
monospace
cursive
fantasy

[edit]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

[edit]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.

[edit]Alternatives

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 optionCopy on the right click contextual menu for a highlighted image which copies the alt attribute to the clipboard.

Image replacement techniques can be easily done with the php/JavaScript library FLIR. It can automatically replace any text on the webpage with an automatically generated picture, if the font is missing from the client machine. FLIR is open-source itself, and does not require any other tools to be deployed or used, besides a php-interpreter. (which is also open-source). Nor does it require any plugins on the user's computer. The only things that the client's browser needs to implement is displaying of images and JavaScript. Any true-type or open type font can be used to automatically generate text.

Another 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.

Web fonts, a new CSS2 feature, introduced functions for client-side font matching, font synthesis and progressive rendering which give a web designer a wider variety of font styles based on the rendering process inside the browser.

Read more...