CSS font stacks & developer FAQs with Web standards
Put your text ad here 
WestNIC provides reliable web hosting services
Web hosting directory, find affordable web hosting
Fastwebhost offers cheap web hosting & reseller hosting services
This FAQ is part of the Code Style Help and FAQ section. Join our premium content service for full access all FAQ answers.
plain text, on topic, no spam
sans-serif in my font stack?
fantasy and cursive fonts available?
serif family for monospaced fonts?
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;
}
A: The style of the capital I character is not set by the operating system but the font family that is used to render the letter. Many sans serif fonts do not have horizontal strokes on the capital I and are practically identical to the lowercase l character. One common exception is the sans serif font Verdana. Horizontal strokes are much more common on serif fonts in general. Many monospace fonts have a typewriter style with horizontal strokes on the I, but sans serif monospace fonts are also common.
Since you cannot guarantee any particular font family will be rendered in CSS, it would be best to research a serif font stack or monospace font stack in which all the named fonts have horizontal strokes on the capital I. Provided you have a good range of known fallback fonts for the most common operating systems, there is a reasonable probability that the capital I will be rendered with horizontal strokes for most people.
See the serif and monospace font stacks in the Build better CSS font stacks article for a starter.
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.
… full answer hidden, click for full answers
Premium members click below for full answer
What are the most suitable fonts for the Web?
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.
A: This is exactly the purpose of the font stack builder, to refine your font selection and stack sequence to get the best results for your typography. It is a matter of judgement whether you top your font stack with Lucida Sans Unicode or Lucida Sans, there may be subtle differences in their character forms and relative size, certainly the Unicode version has better coverage on Windows.
As you have noticed, putting more common fonts towards the top of the font stack reduces the likelihood that fonts further down the stack will be displayed for most people. Only the few that do not have the top font will see a fallback font.
A: The FontFinder add-on for Firefox will tell you which font is actually rendered in any Web page, just select some text, right click and it presents several options to inspect the font styling.
A: CSS font-family declarations should use a series of preferred fonts and a generic fallback font because the display of fonts depends on the font being installed on the end user's computer. Not all users will have the fonts you specify, though some fonts are very common; if they don't have the first named font, they may have the next font in the list, so that would be used.
The fonts available on Windows, Mac and Linux operating systems vary, so CSS font stacks should specify equivalent or similar fonts that may be available each system to improve the chances that one of the preferred fonts will be used. That's the purpose of the Code Style Web font survey and font stack builder, to make it easier to build a more robust CSS font stack.
sans-serif in my font stack?
A: Most Web browsers will choose a reasonable sans serif as the ultimate fallback font. Some browsers allow you to select fonts to use for the generic font family fallbacks, but few people will take the trouble to do so. Arial is the default sans serif font for Firefox and Internet Explorer on Windows, Helvetica will be the default on Mac systems.
fantasy and cursive fonts available?
A: Browsers that conform to the CSS specification are expected to have generic fantasy and cursive fonts configured by default, but ultimately this relies on the fonts being available through the operating system. Most current operating systems have plenty of fantasy and cursive fonts available, so it is likely that a suitable font will be rendered, but the specific generic font that is selected may vary widely between operating systems. That's why it is best to limit the use of fantasy and cursive fonts, and it is all the more important to choose a font stack that includes named fonts that are very likely to be available on each platform.
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 particular Web browser installation, especially when it comes to fantasy fonts. The generic font family type fantasy will provide a reasonable last resort, see the fantasy font sampler and Fantasy font stack builder for a guide to the most common fantasy fonts on Windows, Mac and Linux systems.
… full answer hidden, click for full answers
Premium members click below for full answer
What are the default fantasy fonts?
serif family for monospaced fonts?
A: The appropriate generic font family name for monospaced fonts is monospace. The fonts you have chosen do have serifs, their fixed width is the key aspect.
Monaco, Courier and Courier New are quite common across platforms, but Lucida Console, Consolas and Lucida Typewriter are a closer match with Monaco on Windows. DejaVu Sans Mono, Bitstream Vera Sans Mono and Lucida Sans Typewriter would be suitable for Linux.
body {
font-family: Monaco,
"Lucida Console",
Consolas,
"Andale Mono",
"Bitstream Vera Sans Mono",
"Lucida Sans Typewriter",
"DejaVu Sans Mono",
monospace;
}
See this Monaco-based font stack for frequency statistics on each font. The Monospace font sampler page gives more examples.
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.
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.
A: As a general rule, it is best to avoid inline style rules because they make your code more difficult to maintain and defeat one of the great strengths of CSS; to separate presentation code from markup. If you have an external style sheet and inline styling it can also lead to confusion because the inline style may override those in the external style sheet; over time you may forget about the inline styles and struggle to solve the unexpected styling it can cause. Having said that, sometimes inline styling is the easiest and most convenient way to get the job done. So long as you understand the judgement you are making, and perhaps comment the code as a reminder to yourself, you can use nested pairs of double or single quotes.
<p style="font-family: 'Trebuchet MS', sans-serif;"> Example </p> <p style='font-family: "Trebuchet MS", sans-serif;'> Example </p>
A: Monospace font characters are all set at a standard width amongst themselves, but the physical display width of the characters depends on the size the font is displayed at and the proportions of the font within its em square. To give a concrete example, in an HTML pre element where a monospace font is set at a CSS font-size of 1em, all its characters should be the same width. If the monospace font happens to be Courier New, its character width will be different from the same text in the Monaco font.
Amongst the most common Windows monospace fonts the Consolas font is the narrowest, but you should include a number of similar fallback fonts for other operating systems too. Use the font stack builder to create a Consolas font stack.
A: To use Angelic War in CSS you should ensure you declare a range of similar fonts as fallbacks and a generic fantasy font family. Most people will not have the font installed and its license does not permit @font-face embedding so you must use a standard font-family declaration:
h1, h2 {
font-family: "Angelic War", fantasy;
}
Insert a good number of fallback fonts in a comma separated priority list between your preferred font and the generic fantasy font family name. It is best to put quotes around font names that have spaces in them.
A: The purpose of the Code Style font stack builder is to:
A typical example is an Arial, Helvetica, sans serif font stack. Many visual designers would say that Helvetica is a better font, so it should go first in the stack. Arial is considered a poor imitation of Helvetica and should only be used as a fall back. However, about 7% of Windows systems have Helvetica installed, and this is an inferior version. Therefore it is better to add “Helvetica Neue” at the top of the stack, since it is available on 96% of Macs, but less than 2% of Windows systems. Finally, pick a similar font like DejaVu Sans for Linux and place it above Arial.
font-family:"Helvetica Neue","DejaVu Sans", Arial, Helvetica,sans-serif;
The sort order of the stack affects which font is most likely to be rendered on different operating systems. The font stack builder enables you to see the percentage probability that each font in the stack will be rendered on a particular computer and use the up and down buttons to adjust to check the best results.
A: If you have an existing font stack you can paste it into the font stack builder to see the probability that each of the specified fonts will be displayed in people's browsers. From there you can add more fonts to the stack with the selectors alongside the Add font families button, hence you “build” the stack.
The process of building a font stack is to specify a set of similar-looking fonts and adjust the sequence such that your preferred fonts are displayed where available, and fallback to reasonable alternatives if not. You should aim to have good coverage for fonts that are typically installed on each of the three main operating systems.
When you declare a font stack it suggests the fonts a Web browser should use to display the text on the page, it does not install the fonts on your computer.
The CSS @font-face rule can be used to deliver a font to the end user for display but strict license terms apply to its use with commercial fonts. The font offered in the @font-face rule is not installed on your computer in the standard way, but is available for use in CSS.
A: Yes, one point that may not be obvious about the font stack builder (though it is explained) is that the probability that fonts down the stack are displayed is calculated from the remainder of those above. For example, Arial is available on about 97% of Macs, Helvetica is available on 100%. If you put Arial above Helvetica, the probability that Helvetica is displayed on a Mac is about 3%. If you move Helvetica above Arial, no Mac users see Arial.
To take a contrived example, if the first font has 80% frequency, that leaves a 20% probability that any other font is displayed. If the second font in the stack has 20% frequency, that equates to a fifth of the remaining 20% which equals 4%. That leaves 16% fall-through to the next font in line. If no further fallback font is named, an un-specified font that belongs to the generic font-family should be displayed, as shown on the bottom line of the font stack table.
In CSS there is no disadvantage in giving a long list of fallback fonts. The probability that fallback fonts display is reduced at each step. It doesn't matter if the fallback fonts are not useful for most people, they could be useful for a small proportion of people who don't match the first few fonts.
A: The section beneath the font stack headed Styled with your font stack shows the current state of your font stack in your browser. The text explains what the font stack percentages mean.
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.
… full answer hidden, click for full answers
Premium members click below for full answer
My font is not supported by all machines!
A: The first thing to check is that your style sheet syntax is correct using an CSS checker and that you have Trebuchet MS installed on your Mac. If you still find the font is not displayed, it is likely the font name is not quoted and it is not matched correctly by your Web browser. Font names that have spaces in them should be placed in quotes according to the CSS recommendations. Although quotes are not strictly required for font names with spaces, some Web browsers do not handle them correctly, so it is best to use them as a safeguard.
body {
font-family: "Trebuchet MS", sans-serif;
}
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.
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.
A: On the Web, the key to rendering Hebrew characters, or any non-Latin language is to use Unicode and choose a font stack that has good coverage of glyphs in the necessary Unicode range. Several of the fonts in the survey support Unicode, particularly Arial Unicode on Windows. Alan Wood's excellent Unicode font reference will identify others.
A: Take a stepwise approach to your font selection. First, Trebuchet MS is a sans serif face, so your ultimate fall back is the generic font-family keyword sans-serif. Trebuchet MS does not have the Unicode character coverage you need, so you will have to pick some better candidates to lead with. Alan Wood's Unicode font reference is an excellent place to start.
This Unicode font guide for open source operating systems, also covers Asian fonts.
Check which fonts cover the character ranges you require. For Windows, “Arial Unicode MS” would be a good choice, fall back to standard Arial. Mac fonts tend to cover narrow ranges of the Unicode character set, so you will have to check the specific coverage you need. For Gujarati choose “Gujarati MT” for example.
Unicode font coverage is much more limited on Linux systems, DejaVu Sans, FreeSans and Bitstream Vera Sans would be good choices generally, but may not have the coverage you require. You may need to add lots of options to improve the chance that a suitable font will be matched, and test on several different systems.
font-family:"Arial Unicode MS","Gujarati MT", Arial,"Bitstream Vera Sans","DejaVu Sans", FreeSans, sans-serif;
… full answer hidden, click for full answers
Premium members click below for full answer
How can I style Asian languages like Trebuchet MS?
A: This site is to do with the Web, not proprietary document formats such as Word, but the problem is similar to how we represent and render special characters on the Web. The standard way to include International Phonetic Alphabet (IPA) glyphs in HTML is to use Unicode, either as UTF-8 character literals with appropriate document character encoding, or as HTML entities.
Unicode numeric entities can be declared as a decimal, ɑ, or prefixed with an x for an hexadecimal value, ɑ for the "open back unrounded" glyph for example. This approach separates the physical representation of a phonetic glyph in a document from the way it is rendered on screen or in print, and removes reliance on a specific font family or operating system. To complete the arrangement, declare a series of preferred font families in a Unicode font stack, as below.
… full answer hidden, click for full answers
Premium members click below for full answer
How can I use the International Phonetic Alphabet in Word?
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;
}
A: If you have the copyright ownership of your font, you can publish your font on the Web and use CSS @font-face rules to prepare it for use in standard font-family declarations with other common fallback fonts.
The CSS @font-face rule is supported by most popular browsers, so you can be reasonably sure your font will be downloaded and displayed. One slight complication is that some browsers require different font file formats than others, which makes the CSS syntax slightly complicated.
The Font Squirrel @font-face generator does an excellent job of converting an original font file into a set of Web font files and writes the appropriate CSS @font-face rules too.
There are several detailed configuration options to consider as you prepare your Web font, one of the most significant is the range of font glyphs to include, which affects the download size of the font files. Font Squirrel allows you to pick a “subset” of characters to include to reduce the file size.
The font conversion process results in a set of font files to upload to your Web server and a CSS @font-face rule like the one below for a normal weight version of the font.
@font-face{font-family:'SFArchRivalRegular';src: url('SF_Arch_Rival-webfont.eot');src: local('SFArchRivalRegular'), url('SF_Arch_Rival-webfont.woff') format('woff'), url('SF_Arch_Rival-webfont.ttf') format('truetype'), url('SF_Arch_Rival-webfont.svg#webfontPgLtCzUx') format('svg');font-weight:normal;font-style:normal; }
The Font Squirrel package includes bold, italic and bold italic sets too.
Once you have declared this @font-face rule, you can use the font family name specified in the first line of the rule in a standard font-family declaration below, with similar fallback fonts.
body {
font-family: 'SFArchRivalRegular',
'Marker Felt',
'Comic Sans MS',
cursive;
}
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.
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.
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.
| Front-end FAQs | Back-end FAQs | Learn Java |
|---|---|---|
About us: site help, text ads and premium content FAQs.