www.codestyle.org

Web fonts FAQ

This FAQ is part of the Code Style Help and FAQ section. Use the help request form below if your question is not answered here, but make sure you are asking the right question first.

Subscribe to this FAQ:

Understanding Web fonts

Q: What are the most suitable fonts for the Web?

A: There are two levels to your question. One cannot be sure that any user will have a specific named font installed, so the first aspect is what type or family of font is most suitable for the Web. Much research has been done but opinions differ; some say sans serif fonts are better because their large x-height makes them more legible at low scale, others say serifs give a more distinctive letter form that helps readers scan the words.

More details available to subscribers:
What are the most suitable fonts for the Web?

Q: Is there one font that is available on all systems?

A: The combined font survey results show that Courier is the most common font available for all platforms, though on Windows you would use Courier New.

Q: How many alternative fonts can I specify?

A: The number of alternative font-family names is unlimited in principle, though there comes a point when the likelihood of the extra fallback fonts being displayed is vanishingly small. Browsers will use the first font name that is matched in the font-family declaration. If you list the most common fonts at the start of the list, it is less likely that rarer alternative fonts would be matched later on. If you prefer a less common font to be used in favour of a more common font, put it at the start of the list.

It does not matter whether the alternative fonts you list belong to the same generic font family, so long as you include a generic font family at the end of the declaration. In this case, one user may see a serif font and another a serif font depending on which is matched first.

Q: What are the default fantasy fonts?

A: The Cascading Style Sheet recommendations are designed specifically to deal with this problem, because ultimately there is no way to know what fonts are available to any specific Web browser installation. The generic font family scheme provides a reasonable last resort.

More details available to subscribers:
What are the default fantasy fonts?

Q: Do I have to buy a program to display Monotype Corsiva?

A: With Cascading Style Sheets there is no need to buy or distribute any software to set the text of your site to Monotype Corsiva. However, you should not use this cursive font for the main body text of your page, because it is not very legible at small scale. To set level three headings in this font, for example, use the following style rule:

h3 {
  font-family: "Monotype Corsiva", cursive;
}
      

If the visitors to your site have Monotype Corsiva installed on their computer, they will see the headings in that font. If not, the final generic cursive font family should result in a cursive font being displayed. You can also specify alternative fall-back fonts that are common on other operating systems, such as Apple Chancery and URW Chancery L for Linux, like this:

h3 {
  font-family: "Monotype Corsiva",
               "Apple Chancery",
               "URW Chancery L",
               cursive;
}
      

Q: How can I calculate the size of fonts with em lengths?

A: There are some additional notes on the em and ex length units in the CSS font-family glossary. The key thing to be aware of with these proportional length units is that the pixel dimensions of fonts rendered on screen will depend on the default font size setting for the browser and any custom size setting made by the user. This is actually one of the great advantages of font-based length units; they will adjust to users' preferences. You can also use the same length units to size your page layouts proportionally.

Font style problems

Q: How can I use my custom font in CSS?

A: A font must be installed on the end-user's computer to be available for display in their Web browser. It is not likely that people will download and install your font just to view your Web site. If you want to display a preview of the font before they download, you could create rasterised samples of the font as image files.

Q: My font is not supported by all machines!

A: If you specify any named font, you can be sure that some computers will not have it, which is why Cascading Style Sheets are designed to name a series of alternative fonts and a common generic font family. If your preferred font is a sans serif type, look-up other sans serif fonts that are available on other platforms. Use the Code Style font sampler to choose alternative fonts that look similar to your preferred font, see the sans serif font sampler for instance.

More details available to subscribers:
My font is not supported by all machines!

Q: Why doesn't the Terminal font show in Netscape?

A: Terminal is a common font on Windows systems, but it is not a TrueType font, which may be the reason it is not rendered in Mozilla-based browsers. Terminal is rendered by Internet Explorer and Opera and is relatively common, see Windows font survey results for the latest figures.

Q: Why doesn't Trebuchet MS display on my Mac?

A: The first thing to check is that your style sheet syntax is correct using an online CSS checker. If you have Trebuchet MS installed on your Mac, it is likely you have not quoted the name of the font. Font names that have spaces in them must be placed in quotes. Regrettably, some Windows Web browsers tolerate un-quoted font names in CSS, which can be misleading. Strict browsers that follow the W3C font-family recommentation to the letter expose the error.

body {

 font-family: "Trebuchet MS", sans-serif;
}
          

Q: Can I use Lucida Sans for Mac and Windows?

A: You can specify Lucida Sans and have a reasonable chance of finding a match in many Windows and Mac users' Web browsers. For Windows the probability is about 61%, for Mac about 60%, so it would be sensible to suggest more common fallback fonts too. Lucida Sans Unicode is much more common on Windows and is based on the same font. The Code Style sans serif font sampler picks out those fonts by platform.

Q: How can I control the minimum font size?

A: Some browsers have settings to control the minimum font sizes, but the options vary considerably. In Internet Explorer you can manually adjust the font size for individual pages, but there is no "sticky" font setting that ensures a minimum size on any given page.

The Opera Web browser allows you to set the minimum font size for any page, which leaves anything above that at its original size. That may help. Go to the Tools menu, then Preferences... > Advanced > Fonts and adjust the Minimum font size (pixels) field.

Windows fonts

Q: Has Zapf Chancery been made available to Windows 2000?

A: Yes, the International Type Corporation produce a version of Zapf Chancery for Windows that is available from the ITC Web site.

See Anchor Points: Font foundries & sources for more font links.

Q: Is Apple Chancery available on Windows XP?

A: The Apple fonts are not available for purchase for any platform, but see this MyFonts selection of chancery style fonts.

Q: Is Tahoma a Windows ME default?

A: Thanks for your interest in Code Style and your survey submission. Tahoma has been a default font for all Windows systems for many versions now, it's the default font for the operating system windows, like Windows Explorer. The 93% frequency reported in the Windows font survey results indicates the degree of error in the survey.

Q: How do I install new fonts for Windows?

A: To install fonts on Windows systems, select the fonts folder under the Windows installation directory, e.g. c:\Windows\Fonts and choose Install New Font... from the File menu. Browse to the source of your new fonts using the Folders and Drives selectors and click OK to complete.

Q: Where can I get Monotype Corsiva in bold?

A: Monotype signifies the name of the foundry that produces the Corsiva font, AGFA Monotype. You can also find a very broad range of fonts from many foundries on the MyFonts site.

Q: Where can I get the FIRSTHOME font?

A: Font survey submissions that include the FIRSTHOME font have exclusively been submitted from Windows XP computers. The font is only present in a tiny fraction of all Windows XP submissions, which suggests it is installed with a relatively uncommon application rather than the operating system. The FIRSTHOME font was produced by MediaCrest Incorporated in 1997, but there is no current record of the company on the Web.

Help request

Use the form below to submit a help request or general enquiry about the Code Style Web site. Before you write read the guidelines on asking the right questions, and check this page for periodic updates.

Name:
Email*:
Comments:
Join mailing list:	Yes, join the mailing list No
* Required fields

Your email address will not be mis-used. If you include your address you may be sent a personal reply, you will not be added to any mailing list unless you request it. Read the site privacy statement for details.

Navigation

• Home page
• CSS style guide
  • Font sampler
  • Media monitor
• Java & servlets
• Javascript & DOM
• HTML & XHTML
• Help and FAQs
• Site log

Site search

Home · CSS · Java · Javascript · HTML · Help · Log

Copyright © 2000-2008 Philip Shaw, all rights reserved, terms and conditions apply.
Valid XHTML and correct CSS. Last updated 03 May 2008 at 20:16:50 PM BST.
URI: http://www.codestyle.net/css/font-family/FAQ.shtml Metadata: RDF RSS 1.0