www.codestyle.org

Web fonts FAQ

This FAQ is part of the Code Style Help and FAQ section. Join our premium content service for full access all FAQs and more.

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 premium content service subscribers:
What are the most suitable fonts for the Web?

Actions: Follow-up, clarify or correct this answer. Submit a new question.

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.

Actions: Follow-up, clarify or correct this answer. Submit a new question.

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 premium content service subscribers:
What are the default fantasy fonts?

Actions: Follow-up, clarify or correct this answer. Submit a new question.

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;
}
      

Actions: Follow-up, clarify or correct this answer. Submit a new question.

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.

Actions: Follow-up, clarify or correct this answer. Submit a new question.

Font family declarations

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.

Actions: Follow-up, clarify or correct this answer. Submit a new question.

Q: My font-family rules are very repetitive!

A: One enhancement you can make when several elements have the same declarations is to use a grouped selector, which means all CSS selectors in the comma separated list have the same style:

h1, h2, p, ol, ul {
  font-family: Utopia,
               UtopiaStd,
               Georgia,
               "New Century Schoolbook",
               Garamond,
               "Hoefler Text",
               Bookman,
               serif;
  /* other common declarations */
}
      

However, it might be better still if this common declaration were applied to the body element and overridden for elements where it should be different. Body element styles will be inherited by all child elements, which include h1, h2, p, ol and ul.

body {
  /* common declaration */
}
/* Specific slectors overridden */
h3, h4, h5, h6 {
  font-family: Helvetica,
               Arial,
               Tahoma,
               sans-serif;
}
      

These element-specific selectors will override the style inherited from the body element.

Actions: Follow-up, clarify or correct this answer. Submit a new question.

Q: How can I use fonts from Microsoft Word or OpenOffice in CSS?

A: To use fonts installed with Microsoft Word or OpenOffice in your CSS, just add the relevant font family name to your font stack and ensure any font names that have spaces are enclosed in double or single quotes.

Fonts installed with popular office software suites are likely to be found on many other people's computers too (see Windows font survey results), but you should add a comma separated list of alternative fallback fonts after your preferred font in case the first is not installed on readers' computers. And set a final generic font family type at the end. Ideally, the fallback fonts should belong to the same generic font family and have a similar style to your preferred font.

body {
  font-family: "Office font",
               "Fallback font",
               sans-serif;
}
      

Actions: Follow-up, clarify or correct this answer. Submit a new question.

Q: Is there a CSS style for horizontally scaling type?

A: The CSS 2 fonts recommendation and CSS 3 fonts module include a font-stretch property that is intended to provide font width adjustments through a range of relative and absolute values. For example, to make a font relatively more condensed use the narrower value, or wider for an expanded style. There are 9 absolute font width values from ultra-condensed to ultra-expanded via extra- and semi- sizes in between.

At the time of writing, no current browser has implemented this aspect of the CSS recommendations. For the time being, the only way to obtain condensed or expanded font styles in CSS is to target specific font families like "Arial Narrow", but these types are not commonly installed.

Actions: Follow-up, clarify or correct this answer. Submit a new question.

Windows fonts

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.

Actions: Follow-up, clarify or correct this answer. Submit a new question.

Q: How can I get the new Vista "C" fonts?

A: The freely available Microsoft PowerPoint Viewer 2007 also includes these fonts, which are installed with the program. The fonts included in the installation are Cambria, Cambria Math, Calibri, Constantia, Corbel, Candara and Consolas with italic, bold and bold italic variants.

Actions: Follow-up, clarify or correct this answer. Submit a new question.

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.

Actions: Follow-up, clarify or correct this answer. Submit a new question.

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.

Actions: Follow-up, clarify or correct this answer. Submit a new question.

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.

Actions: Follow-up, clarify or correct this answer. Submit a new question.

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.

Actions: Follow-up, clarify or correct this answer. Submit a new question.

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.

Actions: Follow-up, clarify or correct this answer. Submit a new question.

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.

Actions: Follow-up, clarify or correct this answer. Submit a new question.

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 premium content service subscribers:
My font is not supported by all machines!

Actions: Follow-up, clarify or correct this answer. Submit a new question.

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.

Actions: Follow-up, clarify or correct this answer. Submit a new question.

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 recommendation to the letter expose the error.

body {

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

Actions: Follow-up, clarify or correct this answer. Submit a new question.

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.

Actions: Follow-up, clarify or correct this answer. Submit a new question.

Q: I have to use the Utopia file name on Mac!

A: Your font-family declaration for Linux and Mac versions of Utopia is basically correct. However, Utopia is not a common font on Mac systems at all, so very few Mac users would see this font. There's no harm in including it anyway.

The basic font family name for Utopia on Mac is UtopiaStd, not UtopiaStd-Regular. The "regular" part usually signifies the normal, Roman style of the font with respect to the bold and italic variants. That specific font name reference obviously works, but it would be preferable to use the fundamental font family name.

If you load the font survey applet, the font listing should show the generic font family name for fonts on your system.

Actions: Follow-up, clarify or correct this answer. Submit a new question.

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.

Actions: Follow-up, clarify or correct this answer. Submit a new question.

Navigation

• Home page
• CSS style guide
  • Web font sampler
  • CSS 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 30 November 2008 at 00:19:21 AM GMT.
URI: http://www.codestyle.co.uk/css/font-family/FAQ.shtml Metadata: RDF RSS 1.0