Browser News: Fonts - Font Choices

Choices Classics Coding Font News Archive Free Fonts Icon Fonts Information News Specimens Weights

Fonts ⮞ Choices

Error: JavaScript is needed to render this site: please enable it.

This page offers information about choosing fonts, including choosing embedded (downloaded) fonts.

Choosing Fonts

Choosing fonts is frustrating, especially for those used to print media, since there are so many limitations: a browser can only use fonts which are installed on a user’s PC, or are embedded; no font is installed on all PCs; few are commonly installed; few come in a good variety of widths and weights; and many don’t look good on PC displays. This severely constrains a designer’s choices.

NB: using embedded fonts adds many more choices; see Choosing Embedded (Downloaded) Fonts for more about using embedded fonts.

Font Character Differences

Different fonts often have different characters: any font can lack characters which other fonts have. For though Unicode comprises tens of thousands of characters for hundreds of languages, most fonts have only a fraction of these characters.

Some specialty fonts only have USASCII characters. Most fonts have common Latin script characters needed in Western Europe and the Americas. Fewer fonts have all Unicode Latin script characters.

Problems can occur because:

Most Unicode characters are unavailable to most users.
Different fonts have different Unicode subsets.
Older fonts will likely have fewer characters than newer ones.
Some fonts have errors.
Older browsers may support fewer characters than newer browsers, and older browsers may support characters better when numeric character references rather than character entities are used.
Some browsers may render some characters wrongly.

Most problems appear with less common characters.

If a character is missing from a font, the browser should use that character from another font in the font stack. For example, if the current font stack includes Book Antiqua and Times New Roman, and the page has a character which Book Antiqua doesn’t have, the browser will look for the character in the Times New Roman font.

All this affects the choice of fonts. Not all fonts are equal. Not all browsers are equal. A prudent designer may limit themself to fonts with many characters. Or the designer might limit themself to these fonts for body text, but may choose from a larger number of fonts for header text, adopting the principle that headers are less likely to contain uncommon characters than body text will. The prudent designer may also use numeric character references rather than character entities for less common characters.

When suggesting fonts for a web page, several issues must be considered:

Suggest Flexible Fonts
Suggest Common Fonts
Suggest Similar Fonts
Suggest Readable Fonts
Consider Fonts with Many Characters
Coping with DirectWrite Issues
Suggest Alternate Fonts in a Font Stack
Consider Different Fonts for Printing
Choosing Embedded (Downloaded) Fonts

Suggest Flexible Fonts

You should choose fonts which come in a good variety of weights and (ideally) widths, preferably with italic faces.

For body fonts, this author prefers fonts which come in normal, semibold, and bold weights, in normal and condensed widths.

For header fonts this author prefers font families which come in bold and black weights — and even better, in extrabold weights — in normal, condensed, and expanded widths, and with small caps. And, of course, the body and header fonts must complement each other.

Unfortunately few installed or free embedded fonts meet these desiderata. Many fonts come in only two weights, normal and bold; and when a regular font comes in more than two weights, any condensed counterparts generally come in fewer weights. And expanded fonts are very, very rare.

$ Many exceptionally flexible fonts may be purchased, including many varieties of fonts common with Windows and MacOS. For example, greatly expanded versions of the standard Windows fonts Arial, Georgia, Times New Roman, and Verdana are available with more widths and weights than available with the Windows versions. Unfortunately, for-pay fonts can be very expensive.

Exceptionally flexible free sans-serif fonts include Argentum Novus, Argentum Sans, Assailand, Avrile Sans, Avrile Sans Condensed, Barlow, Bert Sans, Cabin, Avrile Sans, Cheyenne Sans, Cheyenne Sans Novus, Elaine Sans, Encode Sans, Encode Sans Condensed, Encode Sans Expanded, Encode Sans Semi Condensed, Encode Sans Semi Expanded, Ezarion, Fira Sans, Gothic A1, Grenze, IBM Plex Sans, Inter, Libre Franklin, Linik Sans, Manix Sans HL, Metropolis, Morrison, Noto Sans, Noto Sans Display, Public Sans, Raleway, Readiness, Rising Sun, Robert Sun, Roboto, Rosa Sans, Saira, Saira Condensed, Saira Extra Condensed, Saira Semi Condensed, SF UI Display, Spartan, Squarion, Transpass, Trujillo, Verano Sans, and Zapus Sans

Flexible free serif fonts are rarer, including Avrile Serif, IBM Plex Serif, Oregon LDO, Martel, Noto Serif, Noto Serif Display, Spectral, Taviraj, and Trirong.

Important: you should especially consider the many free Squirrel, Google, and Font Library fonts as embedded fonts.

Consider Fonts with Many Characters

Some fonts have more characters than others. You should suggest fonts having all the characters you use in sites: many specialized fonts have only a limited range of characters. NB: visitors may have older versions of fonts which lack characters supported by newer versions: e.g. very old versions of Microsoft’s Arial font don’t support the Euro character (€). NB: headers typically need a smaller range of characters than body text, so headers may use fonts not suitable for body text.

Suggest Common Fonts

Suggest common fonts. For sites used within a company, e.g. in an intranet, consider fonts common to the company’s PCs.

Don’t assume that users have the same fonts as you. If you or your client prefers an uncommon font, you can make it the first in a font-family list, but you must remember that many won’t have uncommon fonts.

Suggest Similar Fonts

If you use different fonts for different types of text, choose similar fonts unless you have a specific reason not to. E.g. if you use Arial for body text, you might reasonably use Arial Narrow for thin body text: but you shouldn’t also use Trebuchet for body text unless you have a good reason for making its text look quite different.

NB: one way to determine whether fonts are similar is to determine whether the fonts have similar metrics, e.g. similar widths and x-heights. Certain font metrics are reported in Fonts ⮞ Font Metrics.

NB: some fonts that are similar to each other are depicted in Fonts ⮞ Font Sets.

Choosing different fonts for different types of text is hard, because common fonts are not commonly available in large font families. The only common font commonly found with a largish family is Arial, which is available on many Windows PCs as Arial, Arial Narrow, Arial Black, and Arial Rounded MT Bold fonts, and sometimes as Arial Nova and Arial Nova Condensed fonts.

As a result, many sites are restricted to a handful of fonts.

Suggest Readable Fonts

Suggest fonts that are easy to read. The most legible body fonts on PC displays are sans-serif fonts optimized for displays. Many fonts which look good in print may not look good on displays because many display resolutions are too low. Note:

You should create sample lorem ipsum text in each of your candidate fonts, and exclude any fonts which are clearly less readable.
Fonts that are a bit darker tend to be a bit more readable, and different browsers may render text more or less darkly. Safari renders text darkest. Whereas on Windows, Edge, Internet Explorer, and Firefox (57 and later) render text less darkly; and Chrome, Edge, Firefox (56 and earlier), Opera, and Vivaldi least darkly.

Here is an example of Fira Sans 16px text from Internet Explorer 11, Firefox 59, and Chrome 65:

NB: body fonts should not be coloured in shades of grey, because this makes text less readable, especially with Chrome-based browsers.

Because Chrome-based browsers render text less darkly, you should use a Chrome-based browser to judge which fonts are darkest and therefore most readable: this is especially important because most people use Chrome-based browsers, so many people suffer with fonts which are too pale. Alternative: if you use Edge, Internet Explorer, or Firefox (57 and later) you can simulate the paler text of Chrome-based browsers by setting the text colour to 444_H; e.g. <span style="color:#444;">Example of text</span> will display “Example of text” somewhat as it would appear with Chrome-based browsers.

NB: there is some indication that OTF fonts are darker than equivalent TTF fonts, but I have not been able to confirm this.
Fonts may be chosen for headers which are not quite suitable for body text, because headers are bolder and usually bigger, so resolution problems are less acute.
Suggest scalable fonts — e.g. TrueType or OpenType fonts — not non-scalable fonts, which look bad at most font sizes. Examples of non-scalable Windows fonts are the Microsoft version of Courier (not the same as Courier New), as well as MS Serif and MS Sans Serif.
Fonts are more legible at higher resolutions, so more fonts become suitable as more people adopt higher resolution displays. But don’t assume that everyone has the same resolution as you have: designers tend to have more powerful PCs with higher resolution displays.
Microsoft’s core web fonts are optimized for displays. The fonts include: Andale Mono, Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, and Verdana.
Microsoft’s core web font Verdana is best used for small fonts, and only when Verdana is certain to be installed, or when fall-back fonts have similar metrics: small text which is barely legible in Verdana is illegible in most fonts, as most fonts have smaller widths and aspect values.
New Vista Font Sizes

These samples show differences in sizes between Arial, Arial small, and the six new Vista fonts … if the fonts are installed:

Arial:
This shows differing text sizes in the new Vista fonts; a quick brown fox jumps over the lazy dog: ABCDE FGHIJ KLMNO PQRST UVWXYZ abcde fghij klmno pqrst uvwxyz 01234 56789.¶

Arial small
This shows differing text sizes in the new Vista fonts; a quick brown fox jumps over the lazy dog: ABCDE FGHIJ KLMNO PQRST UVWXYZ abcde fghij klmno pqrst uvwxyz 01234 56789.

Calibri
This shows differing text sizes in the new Vista fonts; a quick brown fox jumps over the lazy dog: ABCDE FGHIJ KLMNO PQRST UVWXYZ abcde fghij klmno pqrst uvwxyz 01234 56789.

Cambria
This shows differing text sizes in the new Vista fonts; a quick brown fox jumps over the lazy dog: ABCDE FGHIJ KLMNO PQRST UVWXYZ abcde fghij klmno pqrst uvwxyz 01234 56789.

Candara
This shows differing text sizes in the new Vista fonts; a quick brown fox jumps over the lazy dog: ABCDE FGHIJ KLMNO PQRST UVWXYZ abcde fghij klmno pqrst uvwxyz 01234 56789.

Consolas
This shows differing text sizes in the new Vista fonts; a quick brown fox jumps over the lazy dog: ABCDE FGHIJ KLMNO PQRST UVWXYZ abcde fghij klmno pqrst uvwxyz 01234 56789.

Constantia
This shows differing text sizes in the new Vista fonts; a quick brown fox jumps over the lazy dog: ABCDE FGHIJ KLMNO PQRST UVWXYZ abcde fghij klmno pqrst uvwxyz 01234 56789.

Corbel
This shows differing text sizes in the new Vista fonts; a quick brown fox jumps over the lazy dog: ABCDE FGHIJ KLMNO PQRST UVWXYZ abcde fghij klmno pqrst uvwxyz 01234 56789.

Pan-European Supplemental Fonts

These samples show differences between some Pan-European Supplemental Fonts and their parent fonts … if the fonts are installed:

Arial
This shows differences in the new fonts; a quick brown fox jumps over the lazy dog: ABCDE FGHIJ KLMNO PQRST UVWXYZ abcde fghij klmno pqrst uvwxyz 01234 56789.

Arial Nova
This shows differences in the new fonts; a quick brown fox jumps over the lazy dog: ABCDE FGHIJ KLMNO PQRST UVWXYZ abcde fghij klmno pqrst uvwxyz 01234 56789.

Arial Narrow
This shows differences in the new fonts; a quick brown fox jumps over the lazy dog: ABCDE FGHIJ KLMNO PQRST UVWXYZ abcde fghij klmno pqrst uvwxyz 01234 56789.

Arial Nova Condensed
This shows differences in the new fonts; a quick brown fox jumps over the lazy dog: ABCDE FGHIJ KLMNO PQRST UVWXYZ abcde fghij klmno pqrst uvwxyz 01234 56789.

Georgia
This shows differences in the new fonts; a quick brown fox jumps over the lazy dog: ABCDE FGHIJ KLMNO PQRST UVWXYZ abcde fghij klmno pqrst uvwxyz 01234 56789.

Georgia Pro
This shows differences in the new fonts; a quick brown fox jumps over the lazy dog: ABCDE FGHIJ KLMNO PQRST UVWXYZ abcde fghij klmno pqrst uvwxyz 01234 56789.

Rockwell
This shows differences in the new fonts; a quick brown fox jumps over the lazy dog: ABCDE FGHIJ KLMNO PQRST UVWXYZ abcde fghij klmno pqrst uvwxyz 01234 56789.

Rockwell Nova
This shows differences in the new fonts; a quick brown fox jumps over the lazy dog: ABCDE FGHIJ KLMNO PQRST UVWXYZ abcde fghij klmno pqrst uvwxyz 01234 56789.

Rockwell Condensed
This shows differences in the new fonts; a quick brown fox jumps over the lazy dog: ABCDE FGHIJ KLMNO PQRST UVWXYZ abcde fghij klmno pqrst uvwxyz 01234 56789.

Rockwell Nova Condensed
This shows differences in the new fonts; a quick brown fox jumps over the lazy dog: ABCDE FGHIJ KLMNO PQRST UVWXYZ abcde fghij klmno pqrst uvwxyz 01234 56789.

Verdana
This shows differences in the new fonts; a quick brown fox jumps over the lazy dog: ABCDE FGHIJ KLMNO PQRST UVWXYZ abcde fghij klmno pqrst uvwxyz 01234 56789.

Verdana Pro
This shows differences in the new fonts; a quick brown fox jumps over the lazy dog: ABCDE FGHIJ KLMNO PQRST UVWXYZ abcde fghij klmno pqrst uvwxyz 01234 56789.

Microsoft created six new fonts for Vista which can be installed on Windows 2000+, and these are also optimized for displays. The fonts are: Calibri, Cambria, Candara, Consolas, Constantia, and Corbel.

Unfortunately these fonts are less useful than they could be, because none has a semibold weight.

NB: Candara, Constantia, and Corbel have digits with old style numeric descenders, which can look odd, especially in columns of numbers.

Caution: a problem with these fonts is that they are notably narrower and shorter than text in more common fonts such as Arial, therefore these fonts are harder to read: indeed, the size of the six new Vista fonts is very close to the size of the Arial small font, when the size of the small font is as recommended in the proposed CCS4 recommendation. At one time this site used Calibri as its preferred font, but many people complained that the text was too small to read, so this site had to revert to a larger font. The difference in sizes is illustrated by the following images, which have ‘a’ and ‘x’ in Arial, in Arial Small, and in each of the six new fonts:

See the sidebar to compare Arial to the six new Vista fonts.
With Windows 10, optional Pan-European Supplemental Fonts are available: Arial Nova, Arial Nova Condensed, Georgia Pro, Georgia Pro Cond, Gill Sans Nova, Gill Sans Nova Cond, Neue Haas Grotesk Text Pro, Rockwell Nova, Rockwell Nova Condensed, Verdana Pro, and Verdana Pro Cond.

Georgia Pro and Verdana Pro are especially flexible fonts, with light, regular, semibold, and black weights, and with both normal and condensed widths. Arial Nova, Gill Sans Nova, and Rockwell Nova are less flexible: Arial Nova with only light, regular, and bold weights; Gills Sans Nova with light, regular, medium, bold, and ultrabold weights; Rockwell Nova with light, regular, bold, and (in normal widths) extrabold weights. Arial Nova, Gill Sans Nova, and Rockwell Nova all lack semibold weights, but do come in normal and condensed widths.

Note that Arial Nova is not very much like Arial; rather, Arial Nova is similar to Univers.

NB: there are two major differences between Georgia and Georgia Pro: Georgia has old style numeric descenders; and Georgia Pro has taller, more legible numeric characters.

NB: the Arial Nova, Georgia Pro, Rockwell Nova, and Verdana Pro fonts have somewhat different metrics from their parent fonts, Arial, Georgia, Rockwell, and Verdana. For example, Arial Nova text is smaller than Arial text.

See the sidebar to compare some new fonts to their parent fonts.
Serif, italic, and oblique fonts are poorer at lower resolutions, lower weights, and in smaller character sizes; they suffer from severe aliasing and loss of fine detail, so such fonts must be used cautiously. Exception: Microsoft’s core web font, Georgia, is optimized for web pages and is more readable than typical serif fonts; Georgia is common with Windows and available for Macs. Exception: there are a small number of serif fonts — see Fonts ⮞ Font Sets ⮞ Serif Fonts Which Are Candidates for Body Fonts — which have large x-heights and which are therefore suitable as body fonts; most must be embedded to be accessible.

Coping with DirectWrite Issues

With operating systems that support DirectWrite, certain fonts named in the CSS font-family list which are narrower, wider, lighter, darker, or styled differently than normal are ignored, just as if the fonts were not installed. This can happen, for example, with Arial Narrow and Arial Black.

DirectWrite may be used on Windows Vista SP2 (and later) by Chrome 37 (and later), Edge (all versions), Internet Explorer 9 (and later), Firefox 4 (and later), Opera 24 (and later), and Vivaldi (all versions). Legacy versions of browsers may offer options to disable DirectWrite, but modern versions don’t.

DirectWrite issues may appear with certain variants of Arial, Arial Special G1, Arial Special G2, Berlin Sans FB, Calibri, DejaVu Sans, DejaVu Serif, Eras ITC, Franklin Gothic, Garth Graphic ATT, Nadianne ATT, Rockwell, Segoe UI, Shannon ATT, Univers — and many more.

To increase the likelihood that all browsers will render fonts as expected, 1 use the CSS font-family property to specify both the specific font and its font family (e.g. font-family:'Arial Narrow', Arial;), 2 use the CSS font-stretch property to specify narrower or wider text (e.g. font-stretch:condensed;), and 3 use the CSS font-weight property to specify lighter or darker text (e.g. font-weight:bold;). Note, however, that even with correct CSS, some browsers may not render different fonts differently: e.g., this author found that modern versions of Chrome, Firefox (prior to FF57), Opera, SeaMonkey, and Vivaldi wrongly rendered Segoe UI Light and Segoe UI Semilight the same, whereas Edge, Internet Explorer, and Firefox (starting with FF57) correctly rendered them differently.

NB: to ensure that the CSS works when DirectWrite is not enabled, it’s critical to correctly name the specific font; for example, in font-family:'Franklin Gothic Medium Cond', 'Franklin Gothic', sans-serif; it’s critical that the specific font truly is named Franklin Gothic Medium Cond. Getting the name right can be hard, because Windows offers no clear way to determine the real font name: it often implies false font names, e.g. implies that the name of the Franklin Gothic Medium Condensed font is Franklin Gothic Cond Medium. This author has found that the easiest way to ensure that the specific font name is correct is to use the font names in the list of fonts in the usually reliable Universal Character Map or the dp4 Font Viewer.

NB: this author has found no way to write text onto a <canvas> whose font must be selected by font-stretch. The context.fillText() method can write text whose font can be selected by a combination of font-style, font-variant, font-weight, font-size and font-family, but not text whose font must be partly selected by font-stretch.

Following are examples — using the Arial, Berlin Sans FB, Calibri, Eras ITC, Franklin Gothic, Rockwell, and Segoe UI font families (and, for lagniappe, two other Segoe fonts and the related Selawik font!) — showing how to cope with DirectWrite issues. The examples work, of course, only if the fonts are installed.

Arial

For Arial Narrow, use the CSS: font-family:'Arial Narrow', Arial, sans-serif; font-stretch:condensed; font-weight:normal;
For Arial Narrow Bold, use the CSS: font-family:'Arial Narrow', Arial, sans-serif; font-stretch:condensed; font-weight:bold;
For Arial, use the CSS: font-family:Arial, sans-serif; font-stretch:normal; font-weight:normal;
For Arial Bold, use the CSS: font-family:Arial, sans-serif; font-stretch:normal; font-weight:bold;
For Arial Black, use the CSS: font-family:'Arial Black', Arial, sans-serif; font-stretch:normal; font-weight:900;

Berlin Sans FB

For Berlin Sans FB, use the CSS: font-family:'Berlin Sans FB', sans-serif; font-stretch:normal; font-weight:normal;
For Berlin Sans FB Demi, use the CSS: font-family:'Berlin Sans FB Demi', 'Berlin Sans FB', sans-serif; font-stretch:normal; font-weight:600;
For Berlin Sans FB Bold, use the CSS: font-family:'Berlin Sans FB', sans-serif; font-stretch:normal; font-weight:bold;

Calibri

For Calibri Light, use the CSS: font-family:'Calibri Light', Calibri, sans-serif; font-stretch:normal; font-weight:100;
For Calibri, use the CSS: font-family:Calibri, sans-serif; font-stretch:normal; font-weight:normal;
For Calibri Bold, use the CSS: font-family:Calibri, sans-serif; font-stretch:normal; font-weight:bold;

Eras ITC

For Eras Light ITC, use the CSS: font-family:'Eras Light ITC', 'Eras ITC', sans-serif; font-stretch:normal; font-weight:100;
For Eras Medium ITC, use the CSS: font-family:'Eras Medium ITC', 'Eras ITC', sans-serif; font-stretch:normal; font-weight:normal;
For Eras Demi ITC, use the CSS: font-family:'Eras Demi ITC', 'Eras ITC', sans-serif; font-stretch:normal; font-weight:600;
For Eras Bold ITC, use the CSS: font-family:'Eras Bold ITC', 'Eras ITC', sans-serif; font-stretch:normal; font-weight:bold;
For Eras Ultra ITC, use the CSS: font-family:'Eras Ultra ITC', 'Eras ITC', sans-serif; font-stretch:normal; font-weight:900;

Franklin Gothic

For Franklin Gothic Medium Condensed, use the CSS: font-family:'Franklin Gothic Medium Cond', 'Franklin Gothic', sans-serif; font-stretch:condensed; font-weight:normal;
For Franklin Gothic Demi Condensed, use the CSS: font-family:'Franklin Gothic Demi Cond', 'Franklin Gothic', sans-serif; font-stretch:condensed; font-weight:600;
For Franklin Gothic Medium, use the CSS: font-family:'Franklin Gothic Medium', 'Franklin Gothic', sans-serif; font-stretch:normal; font-weight:normal;
For Franklin Gothic Demi, use the CSS: font-family:font-family:'Franklin Gothic Demi', 'Franklin Gothic', sans-serif; font-stretch:normal; font-weight:600;
For Franklin Gothic Heavy, use the CSS: font-family:'Franklin Gothic Heavy', 'Franklin Gothic', sans-serif; font-stretch:normal; font-weight:900;

Rockwell

For Rockwell Condensed, use the CSS: font-family:'Rockwell Condensed', 'Rockwell', serif; font-stretch:condensed; font-weight:normal;
For Rockwell Condensed Bold, use the CSS: font-family:'Rockwell Condensed', 'Rockwell', serif; font-stretch:condensed; font-weight:bold;
For Rockwell, use the CSS: font-family:Rockwell, serif; font-stretch:normal; font-weight:normal;
For Rockwell Bold, use the CSS: font-family:Rockwell, serif; font-stretch:normal; font-weight:bold;
For Rockwell Extra Bold, use the CSS: font-family:'Rockwell Extra Bold', Rockwell, serif; font-stretch:normal; font-weight:900;

Segoe UI (and two other Segoe fonts)

For Segoe UI Light, use the CSS: font-family:'Segoe UI Light', 'Segoe UI', sans-serif; font-stretch:normal; font-weight:100;
For Segoe UI Semilight, use the CSS: font-family:'Segoe UI Semilight', 'Segoe UI', sans-serif; font-stretch:normal; font-weight:300;
For Segoe UI, use the CSS: font-family:'Segoe UI', sans-serif; font-stretch:normal; font-weight:normal;
For Segoe UI Semibold, use the CSS: font-family:'Segoe UI Semibold', 'Segoe UI', sans-serif; font-stretch:normal; font-weight:600;
For Segoe UI Bold, use the CSS: font-family:'Segoe UI', 'Segoe UI', sans-serif; font-stretch:normal; font-weight:bold;
For Segoe UI Black, use the CSS: font-family:'Segoe UI Black', 'Segoe UI', sans-serif; font-stretch:normal; font-weight:900;
For Segoe Print, use the CSS: font-family:'Segoe Print', cursive;
For Segoe Script, use the CSS: font-family:'Segoe Script', cursive;

Selawik (A Segoe UI Replacement)

For Selawik Light, use the CSS: font-family:'Selawik Light', 'Selawik', sans-serif; font-stretch:normal; font-weight:100;
For Selawik Semilight, use the CSS: font-family:'Selawik Semilight', 'Selawik', sans-serif; font-stretch:normal; font-weight:300;
For Selawik, use the CSS: font-family:'Selawik', sans-serif; font-stretch:normal; font-weight:normal;
For Selawik Semibold, use the CSS: font-family:'Selawik Semibold', 'Selawik', sans-serif; font-stretch:normal; font-weight:600;
For Selawik Bold, use the CSS: font-family:'Selawik', 'Selawik', sans-serif; font-stretch:normal; font-weight:bold;

Some experimentation may be required, since browsers may exhibit DirectWrite issues with some fonts, but not with others, and since different values of font-family, font-stretch, and font-weight may be necessary to get the desired results.

Metrically Compatible Fonts

Some fonts have the same metrics as common Microsoft fonts, e.g.:

Arial Compatible: Arimo, Liberation Sans
Arial Narrow Compatible: Liberation Sans Narrow
Calibri Compatible: Carlito
Cambria Compatible: Caladea
Segoe UI Compatible: Selawik
Times New Roman Compatible: Liberation Serif, Tinos
Courier New Compatible: Cousine, Liberation Mono

NB: well-designed sites should work well even when fonts have different metrics.

Font Substitution

Operating systems do font substitution. E.g., with modern browsers, Windows uses Arial for Helvetica, Times New Roman for Times, and Segoe UI Emoji for emojis. Therefore: if Helvetica is in the font stack, Windows uses Arial, even if Arial isn’t in the stack; if Times is in the stack, Windows uses Times New Roman, even if it isn’t in the stack; and if a character is an emoji, Windows 10 uses Segoe UI Emoji, whether or not it’s in the stack.

Font substitution can make sites look alike on different operating systems. E.g. in Linux, Arimo may be configured as an Arial substitute so that when Arial is in the font stack, Linux — which does not come with Arial — will automatically use Arimo instead.

Suggest Alternate Fonts in a Font Stack

Suggest alternate fonts in a CSS font-family list (alias a font set or font stack) as discussed above. The font stack should include:

One font which is the client’s corporate font, if the font is a legible body font; if it isn’t a legible body font, use a similar font which is legible, or use the corporate font in banners or headings.
Perhaps one embedded font, e.g. Fira Sans, for which you will need HTML similar to:

<link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,600,600i,700,700i" rel="stylesheet">
A few fonts commonly installed on MacOS, e.g. Helvetica, and likewise a few fonts commonly installed on Windows, e.g. Arial. A useful reference here is Common Fonts to All Versions of Windows, and Mac Equivalents.
A larger number of fonts commonly installed on Linux, e.g. Liberations Sans and Source Sans Pro. A larger number than in Windows and MacOS is wise because different editions of Linux have notably different fonts, albeit this may be hidden by font substitution (see sidebar).
One generic font, e.g. sans-serif. Exception: if you list a proposed generic font, you should also list a standard generic font for any browsers which don’t support the proposed font.

Hence, for example:

font-family:'Century Gothic', 'Fira Sans', Helvetica, Arial, Arimo, sans-serif;

Which, in a bold font weight, produces:

A quick brown fox jumps over the lazy dog

Because Windows Chrome-based browsers display text which is paler — and therefore harder to read — than other browsers, you should give priority to Windows fonts which are darker, and therefore easier to read. Here are samples of common Windows sans-serif fonts, in Chrome and in Firefox, to help you pick darker fonts:

Chrome sample Firefox sample

Most sites will require several font stacks: one for header text, a second for normal body text, perhaps a third for narrow body text, perhaps another for menus, perhaps more. This site has 4 font stacks for most text, plus 12 font stacks for very specialized text. Examples of the specialized text include fancy ampersands like ‘ & ’ used in titles, and the cursive ‘e’ used in ‘eBook’. The font stacks are listed in Resources ⮞ Colophon.

Important Note: any glyph you use must be in one of the installed or embedded fonts in the applicable font stack. This especially applies to unusual glyphs, such as the pointing hand at the start of this note, since many fonts lack such glyphs. Exception: the browser may also look for the glyph in fonts not listed in the font stack; e.g. Windows will look for glyphs in the Arial or Times New Roman fonts if Helvetica or Times is in the font stack; e.g. Windows 10 (and probably older versions of Windows) will look for glyphs which are symbols or emoji in special Windows fonts such as Segoe UI Emoji; e.g. the browser may look for glyphs in common fonts such as Times New Roman; but these exceptions cannot be depended on, as such behaviour is user-, browser-, and operating-system-dependent.

Caution: the browser might not use one of the suggested fonts, even if it’s installed. E.g., the user may have set an option to disable styles, to use an alternate stylesheet, or to make the browser more friendly to the disabled.

Caution: don’t list non-scalable fonts, e.g. a raster font. Use scalable fonts — e.g. TTF (TrueType) or OTF (OpenType) fonts — instead. Non-scalable fonts look bad at most font sizes. NB: related to this, don’t list Courier before Courier New; Windows may have a non-scalable Courier font, so listing Courier first can result in ugly text on Windows systems.

Caution: always think about Coping with DirectWrite Issues, and must therefore be prepared to specify both the specific font (e.g. Arial Black) and the font family (e.g. Arial), as well as suitable combinations of font-stretch and font-weight.

Consider Different Fonts for Printing

Consider specifying different fonts to be used when your pages are printed: e.g. suggest serif fonts by using CSS such as:

@media print { body { font-family:'Times New Roman', Times, serif; } }

Because print resolution is much higher than display resolution, fonts may be specified for printed text which shouldn’t be used for displayed text. When printing, therefore, you have more fonts from which to choose.

Choosing Embedded (Downloaded) Fonts

Using embedded fonts greatly expands the choices of fonts which may be used in a website.

Google Font Service

Google has collected hundreds of free fonts, some quite good, which may either be downloaded, or embedded using Google’s Font API. Very few visitors to websites will have them installed on their PCs, however, embedding them makes them available to everyone.

Google’s font service is perhaps the easiest to use.

In my opinion, the serif fonts tend to be either bland or unsuitable as body fonts. Some of the sans-serif fonts, however, are truly excellent, though these tend to be fonts provided by major organizations, e.g. Adobe’s Source Sans Pro, Canonical’s Ubuntu, and Mozilla’s Fira Sans.

Many fonts come in extended families, often with several widths, often with many weights. This flexibility makes these fonts much more useful.

The Google service does not necessarily offer the most up-to-date versions of its fonts, and Google does not make it easy to find out about updates. You can, however, learn whether fonts have been added by going to https://fonts.google.com/?sort=date and scrolling down to the end of the list of fonts, where the most recent fonts are listed; alternatively, you can visit the Browser News, which reports the major font additions in its News sidebar.

NB: the Google Fonts site omits chromatic and emoji fonts.

Adobe’s Edge Web Font Service

Adobe offers a few hundred embeddable free fonts on its Edge Web Font Service, somewhat similar to Google’s font services. Few visitors to websites will have them installed on their PCs, however, embedding them makes them available to everyone.

The vast majority of fonts come in few styles, in only one or two weights. This lack of flexibility severely limits their usefulness.

There is no way to learn when fonts have been added or updated.

NB: the Edge Web Font site omits chromatic and emoji fonts.

Font Squirrel

Font Squirrel, like Google and Adobe, offers a lot of free fonts which you can download, but unlike Google and Adobe, it does not host web fonts from which your pages can download web fonts. Instead, Font Squirrel offers a service which converts TTF and OTF fonts to downloadable web fonts, and which downloads the web fonts and associated CSS to your PC: you then incorporate the CSS into your site, and upload the web fonts to your own site’s server.

Font Squirrel does not necessarily offer the most up-to-date versions of its fonts, and it does not make it easy to find out about updates. You can, however, learn whether fonts have been added by viewing its recent fonts; alternatively, you can visit the Browser News, which reports the major font additions in its News sidebar.

Many fonts posted by Font Squirrel are too inflexible for websites, because they tend to come in few widths and weights.

Monotype Font Service

Monotype offers downloadable font services, also called font hosting services: designers can choose from a very large number of fonts — at a price — and insert code provided by the service to style selected text using the font(s) the designer chooses. When the fonts are needed, they are automatically — and temporarily — downloaded from the font service.

Such services are, of course, subject to all the constraints listed in this section.

Other Services

Something similar to Monotype’s Font Services are Cloud Typography, FontSpring Web Fonts, Adobe’s Typekit Service, Typotheque’s Web Fonts Service, and Webtype.

Such services are, once again, subject to all the constraints listed in this section.

NB: to learn more about choosing embedded fonts, read Google Design’s Choosing Web Fonts: A Beginner’s Guide.

NB: to learn how to specify embedded fonts, go here.

Embedded fonts are downloaded from a host the first time they are referenced, which adds to the page load time, but the fonts are usually compressed, which minimizes the added time, and the fonts are cached by the browser, so they need not be downloaded again with subsequent pages.

There are constraints to using embedded fonts:

Browser support of embedded fonts is somewhat uneven. Browsers supporting downloadable fonts, and the font formats they support, are listed here.

Mobile browsers may be more limited. Even if a mobile browser supports embeddable fonts, using such fonts will increase the amount downloaded to mobile devices, which will impair performance and may increase user costs. Recommendation: use media queries to ensure that mobile devices won’t see CSS specifying embeddable fonts.

Because different browsers support different types of font files, it may be necessary to provide embedded fonts in several formats to ensure consistent browser behaviour: this may change if the browser makers agree on a standard format, e.g. WOFF2. For more about this, see Wikipedia: look for the section discussing browser support.
Different font sources offer fonts in different ways. For example, a Google’s font service lets you download its fonts, && lets you use web fonts hosted on its server; b Adobe Edge’s font service doesn’t let you download its fonts, but it does let you use web fonts hosted on its server; and c Font Squirrel lets you download its fonts, and lets you download web fonts which you can host on your own server, but it doesn’t host web fonts on its server.
Sources of embedded fonts do not necessarily have the latest versions of the fonts, nor do they necessarily have all the variants, e.g. style, weights, widths, small-caps, and character sets. A good example is Source Serif Pro, which in Oct 2017 was available in 3 weights (400, 600, and 700) from Google’s font service, but 6 weights (200, 300, 400, 600, 700, and 900) from Adobe’s Edge font service and from Font Squirrel. And Google’s font service had an older version of the fonts than Font Squirrel did. You should examine the alternatives before choosing whose fonts to use.

Note that it’s common for embedded font services to download font files with limited subsets of characters — e.g. a pan-European subset which lacks Greek, Cyrillic, Hebrew, Arabic, Indic, and CJK characters — to minimize download times, unless the fonts are downloaded using options to ensure that desired subsets are included in the downloads.
With some browsers there are problems if some fonts are installed (local) and fonts from the same family are embedded. For example, if Ubuntu and Ubuntu Condensed are installed, and Ubuntu is also embedded, Firefox won’t find the Ubuntu Condensed font unless it’s also embedded. If, therefore, you declare an embedded font, you should also declare all variants of it that you are using.
Fonts are subject to copyright laws: only certain fonts may legally be redistributed (downloaded).
Some tools which create embeddable fonts refuse to create them from certain static fonts, either ignoring the static fonts or reporting that the static fonts are corrupt.
Some fonts which look good when printed will look bad when displayed, especially in the smaller font sizes found in body text, so many embeddable fonts will realistically work well only in header text.
The font files take time to download, especially when the font service is slow, increasing page load times, though browser caching reduces the importance of this.

The time needed to download font files is worse for certain browsers which download all downloadable fonts named in stylesheets, even when not all these fonts are used on a given page.

The time needed to download font files is a more serious problem for mobile browsers, especially for users who must pay for the amount downloaded.

Sources of embedded fonts often give you the choice of selecting a subset of a font which contains fewer characters: for example, a subset which contains only the basic latin characters (i.e. the standard USASCII characters), or a subset which contains the basic latin characters plus the common European accented characters; choosing a subset reduces the sizes of the font files which must be downloaded.
Different browsers render pages differently when font files haven’t yet been downloaded: e.g. some may display blanks for text until the font files are downloaded; some may display text in a default font and change the font after the download is done. Either behaviour can be disconcerting.
When testing a local (off-line) site, with no Internet connection, the browser may timeout trying to establish a connection to the font service, making it impossible to do local testing. This author has found it necessary to create local copies of the fonts, and to create JavaScript to dynamically generate the code that loads the embedded fonts iff the site isn’t local so that he can continue to do site development with no Internet connection. This has the beneficial side-effect of decreasing page load times during local testing.

There might be less need for downloadable fonts if there were a common, free, rich set of fonts which all users had: but this is unlikely.

See Using Embedded Fonts to learn how to specify embedded fonts.

Top of Page Legal Notices