CSS font stacks, media style sheets & web standards
Put your text ad here 
WestNIC provides reliable web hosting services
Free software downloads and drivers download resources
25% off cpanel web hosting and reseller hosting deals. Promo: codestyle25off
This FAQ is part of the Code Style Help and FAQ section. Join our premium content service for full access all FAQs, or choose the single FAQ by email option for premium answers.
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.
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.
Actions: Follow-up, clarify or correct this answer. Submit a new question.
In most cases it would break the terms of a font's end user license agreement (EULA) to re-distribute a font. If you want to buy these fonts a site like My Fonts has a very broad selection including Lucida Casual and Lucida Roman.
Actions: Follow-up, clarify or correct this answer. Submit a new question.
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.
… premium content omitted
Get full access to all FAQs, subscribe now for $40
What are the most suitable fonts for the Web?
Actions: Follow-up, clarify or correct this answer. Submit a new question.
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.
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.
… premium content omitted
Get full access to all FAQs, subscribe now for $40
What are the default fantasy fonts?
Actions: Follow-up, clarify or correct this answer. Submit a new question.
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.
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.
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>
Actions: Follow-up, clarify or correct this answer. Submit a new question.
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.
Actions: Follow-up, clarify or correct this answer. Submit a new question.
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.
… premium content omitted
Get full access to all FAQs, subscribe now for $40
My font is not supported by all machines!
Actions: Follow-up, clarify or correct this answer. Submit a new question.
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.
A: The first thing to check is that your style sheet syntax is correct using an online 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;
}
Actions: Follow-up, clarify or correct this answer. Submit a new question.
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.
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.
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.
… premium content omitted
Get full access to all FAQs, subscribe now for $40
How can I use the International Phonetic Alphabet in Word?
Actions: Follow-up, clarify or correct this answer. Submit a new question.
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.
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.
A: Several font foundries provide basic browse and search tools on their Web sites to help identify fonts by name, see the Anchor Points: Fonts and foundries page. The foundries below provide visual interactive tools to find the font you're looking for.
… premium content omitted
Get full access to all FAQs, subscribe now for $40
How can I find the font used in this logo?
Actions: Follow-up, clarify or correct this answer. Submit a new question.
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.
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.
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.
| Front-end FAQs | Back-end FAQs | Learning Java |
|---|---|---|
About us: site help, text ads, sponsored links and premium content FAQs.
