Fonts ⮞ Information

This page gives information about web fonts:

• Characters
• Default Fonts
• Generic Fonts
• Suggesting Fonts, Weights, & Widths
• Common Fonts
• Chromatic Fonts
• Variable Fonts
• Mobile Fonts
• Similar Fonts
• Using Embedded Fonts
• Using Variable Fonts

Separate pages give additional information about web fonts:

• Coding Fonts (fast JavaScript page)
• Font Ampersands (very, very slow JavaScript page)
• Font At Signs (very, very slow JavaScript page)
• Fluid Design & Font Sizes
• Font Metrics (very slow JavaScript page)
• Font Samples (slow JavaScript page)
• Font Sets (slow JavaScript page)
• Miscellaneous Character Entities, HTML 4 Character Entities, and HTML 5 Character Entities
• List Fonts With Glyphs (fast JavaScript page)
• Font Specimens (fast JavaScript page)
• Possible Weights (slow JavaScript page) or True Weights (very, very slow JavaScript page)
• Richest Fonts (slow JavaScript page)
• View String (slow JavaScript page)

Characters 

Web characters and other web glyphs are defined in the Unicode Standard.

It is important to note that usually have only a small subset of the full Unicode character set. For example, the Unicode 15.1 Standard defines almost 145,000 characters, but many major fonts support only the MES-1 set, with 335 characters, the WGL4 set, with 656, or the MES-2 set, with 1062.

Some fonts have a very large number of char­ac­ters, e.g. the Noto and Bitstream’s Cyberbit font families, though they are handicapped by being available in few weights, and Cy­berbit is further handicapped by being dated.

If you try to use a character which is not available in the first font in the applicable font stack, the browser will try to find that character in suc­ceed­ing fonts in the font stack: this can result in text with odd characters from other fonts; or, if the character can’t be found in any of the fonts, this can result in the character not being rendered. You should, therefore, choose fonts with all the characters you use in your website.

Default Fonts 

There are two classes of fonts which users may be able to choose:

1. User Fonts: these are fonts which users can set to tell browsers what defaults they should use if either 1a pages don’t suggest fonts, or 1b a user has set an option to override the suggested fonts.

   A browser typically lets a user choose a default font, a default serif font, a default sans-serif font, and (often) a default monospace font. However, remember that a browser uses these fonts if 1a pages decline to suggest any fonts (which is very rare), or if 1b a user sets an option to override the fonts which the pages suggest (also very rare).

2. Generic CSS Fonts: these are fonts which browsers should use if none of the suggested fonts is available. For example, the browser should use the generic CSS sans-serif font if a page suggests fonts using font-family: Arial, Helvetica, sans-serif; and if neither Arial nor Helvetica is available.

   I have seen browsers choose wildly inappropriate generic fonts, with no obvious way to make the browser choose other fonts which are sensible: for example, I have seen a popular browser choose an illegible sans-serif font, and I have seen another popular browser choose an ordinary serif font as the fantasy font.

   Some browsers reasonably set generic CSS fonts to their corresponding user fonts: for example, some browsers set the generic CSS sans-serif font to Arial Nova if the user has configured their san-serif user font to be Arial Nova. But some browser don’t.

   Few browsers — Seamonkey and Vivaldi are notable exceptions — let the user choose all the defined generic CSS fonts. Browsers more typically choose the various generic CSS fonts magically, using algorithms which are hidden, which vary from browser to browser, which can result in the browsers choosing incredibly inappropriate fonts, and with no way (or no obvious way) to make the browsers make more sensible choices.

Generic CSS Fonts 

Defined Generic Fonts 

When using the CSS font-family property to style text, there are five defined generic fonts: serif, sans-serif, cursive, fantasy, and monospace. Here are samples of your browser’s generic CSS fonts:

Proposed CSS 4 Generic Fonts 

Eight more generic fonts — system-ui, emoji, math, fangsong, ui-sans-serif, ui-serif, ui-monospace, and ui-rounded — have been proposed for CSS 4 (Sep 2021). As of Sep 2021, many modern browsers — Chrome-based and Firefox-based — support system-ui. The proposed generic fonts are shown below, but of course they will appear properly only if your browser supports these fonts:

Generic Font Issues

There are two important issues to consider about the generic fonts. First, the user’s browser will pick an installed (local) font for each generic font, but may not let the user change what it picks, even if the browser makes a poor choice. And second, a fall-back font should be specified in the font stack for browsers which don’t support the proposed generic fonts.

Let’s consider each of these issues.

Selecting Installed Fonts as Generic Fonts 

The user’s browser will pick an installed (local) font for each generic font. E.g., one user’s browser might choose Arial as the generic sans-serif font, and another user’s browser might choose Luxi Sans.

Unfortunately, a browser may choose a font which is unsuitable, or even unreadable. Users should therefore be able to change their generic fonts; but many browsers, sadly, won’t let users do so:

• Some browsers enable ordinary users to override the browsers’ choices using easy-to-use commands. Examples of such browsers are SeaMonkey and Vivaldi.
• Some browsers enable technically inclined users to override the browsers’ choices by editing obscure configuration data. For example, with Firefox you can define a western fantasy font by going to the special about:config page and adding a property named font.name.fantasy.x-western whose value is the name of the desired fantasy font.
• Some browsers either don’t let users choose, or let users choose to only a limited extent. Examples of such browsers are Edge, Chrome, IE, Opera 15 (and up), and Safari. Forcing such a browser to use a sensible font can be an exercise in frustration. One approach is to 1 identify the font selected (which can be hard), 2 uninstall that font without deleting its font files, 3 close and reöpen the browser, which makes the browser choose a different (and hopefully better) font, 4 reïnstall the font which was uninstalled, then 5 pray that the browser does not revert to the bad font.

Proposed Generic Fonts

If you choose to specify a proposed generic font, you should also specify fall-back fonts for browsers which don’t support the proposed generic fonts. For example:

This selects the generic system-ui font if the browser supports that font, but otherwise would select the generic sans-serif font.

Another, more flexible example, is:

This selects a user interface font in several versions of Android, Linux, MacOS, and Windows, with fall-backs to common system fonts and the generic sans-serif font.

User Interface Fonts

In addition to the generic fonts and proposed generic fonts, some browsers honour a few font names which select common user-interface fonts which can be selected using the CSS font property — but not using the font-family property. These are listed below:

Suggesting Fonts, Weights, & Widths 

There are a number of ways to suggest Fonts, Font Weights, and Font Widths.

Fonts 

There are four ways for designers to suggest which fonts are to be used in a page:

1. The designer can suggest no fonts at all.

   In this case the page uses the user default fonts. This gives the user the greatest control over how pages are ren­der­ed, so it’s a possible approach if the fonts are unimportant to the design.

   An example is this concept site.

   There is a possible problem with this approach: if the user’s fonts lack a character used on the site, there is no fall-back. As a result, this approach is viable only if the site only contains universally available characters.

2. The designer can use the <font> tag.

   NB​: <font> is deprecated and is less capable than other methods: never use it.

3. The designer can use CSS to suggest generic fonts, e.g. using:

   font-family:sans-serif;

   This gives the user more control over how pages look if the browser lets the user choose the generic fonts: however, as discussed above, few browsers enable users to pick the generic fonts, and therefore if a browser selects a poor generic font, pages may look ugly or be unreadable.

   There is a further problem with this approach: if the generic font lacks a character used on the site, there is no fall-back. As a result, this approach is viable only if the site only contains universally available characters.

4. The designer can use CSS to suggest a list of fonts (alias a font set or font stack), e.g. using:

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

   This gives the designer more control over how pages look; this can make pages more attractive and easier to read; this can help to make pages look much the same for different users; this provides fall-backs in case the site uses a character which is not in the first font; but it reduces the user’s ability to choose. NB​: it’s important to suggest a list of fonts from similar typefaces; this ensures more consistent results; the browser will use the first font in the list that is installed or embedded and which contains a site’s characters.

   An example is this site, the Browser News site.

   More details about this appears below, in Suggest Alternate Fonts in a Font Stack.

Sometimes a combination of the above techniques makes sense. E.g., if the site is for a company which prefers a particular font, but this font isn’t easy to read in body text sizes, it may make sense to use the company’s preferred font for headings, but to use a more legible font for body text. An example is this hockey association’s former site.

Font Weights 

Historically most fonts came in only two weights: regular and bold, and many software applications do not support more than this. Today, however, many fonts come in more weights, and more and more applications are supporting more weights. This author does not consider a font to be adequate for 1 body text unless it comes in regular, semi­bold, and bold weights, or 2 header text unless it comes in regular, bold, and either extra­bold or black weights.

A problem with font weights is that there is no standard nomen­clature for the various font weights: e.g., as shown in the table at the right, a font with weight 300 might be called ‘Light’ with one font, but ‘Semi Light’ with another. If in doubt as to which weight corres­ponds to which name, see the (very, very slow) page Fonts ⮞ True Weights. NB​: bold names in this table are the names suggested in the pro­posed CSS 4 specifica­tion, and large names are the names recognized in CSS rules.

There are four ways for designers to suggest which font weights are to be used in a page:

1. When the designer wants bold text, the designer can use HTML tags for which browsers commonly set bold font weights: for example, <b>, <h1>–<h6>, <strong>, <th>.

   This approach can work for simple pages, but it’s quite limited: only two weights are possible — normal and bold — it’s semantically weak, and it makes it harder to later change the format of particular classes of text.

   NB​: generally speaking, <b> should not be used, because it’s semantically meaningless.

2. When the designer wants more nuanced control of weights of tags, the designer can use CSS to specify more nuanced weights for HTML tags: for example:

   h1, h2 { font-weight:900; }
   h3, h4 { font-weight:800; }
   em em { font-weight:600; }

   This CSS specifies the maximum weight to <h1> and <h2> tags, a somewhat lesser weight to <h3> and <h4> tags, and a lesser semi­bold weight to double <em> tags.

   Again, this approach can work for simple pages, but it’s still fundamentally limited: still semantically weak, and still harder to later change the format of particular classes of text.

3. The designer can use inline styles to define the format of text. For example:

   <span style="font-weight:700;">Foxes</span>: quick foxes — whether <span style="font-weight:500;">red</span>, <span style="font-weight:500;">brown</span>, <span style="font-weight:500;">grey</span>, or <span style="font-weight:500;">white</span> &mdash; jump over lazy dogs.

   This produces text in which the initial instance of ‘foxes’ has weight 700, and each instance of a colour has weight 500. For example:

   Foxes: quick foxes — whether red, brown, grey, or white — jump over lazy dogs.

   This is a very poor technique unless the format specified is to be used for that text alone, and nowhere else in the website.

4. The designer can put CSS rules in a stylesheet to specify the appearance of content, and use tags — and class attri­butes within tags — to select the rule(s) which are to apply to that tag.

   For example, the designer could create a stylesheet containing:

   span.species { font-weight:700; }
   span.species_colour { font-weight:500; }

   and then put the following in an HTML document:

   <span class="species">Foxes</span>: quick foxes &mdash; whether <span class="species_colour">red</span>, <span class="species_colour">brown</span>, <span class="species_colour">grey</span>, or <span class="species_colour">white</span> &mdash; jump over lazy dogs.

   which will render:

   Foxes: quick foxes — whether red, brown, grey, or white — jump over lazy dogs.

   This is by far the best technique to use. It allows any valid font weight to be used, is semantically strong, and makes it easy to later change the appearance of content.

Font Widths 

One problem with working with font widths is that there is no stan­dard width for each of the values of the CSS font-stretch property: for example, what is called condensed for one font may be as wide as semi-condensed for another font, or extra-condensed for a third font. (It would be much better if it were possible to specify desired widths in percentages — e.g. by doing font-stretch:80% — and in fact this has been proposed for CSS 4.) The stan­dard names of widths appear in the table at the right, along with the widths (per­centages of the parent fonts’ widths) of various fonts with that width. One consequence of this prob­lem is that it can be very hard to create a font stack in which all the fonts in the stack have similar widths.

Having said that, there is only one way to specify a desired font-width: by setting the font’s CSS font-stretch property in a font stack that takes into account Coping with Direct­Write Issues; for example:

The hard part of this is identifying fonts with similar metrics. You can find font metrics at Fonts ⮞ Metrics.

Common Fonts 

Each user will have different fonts installed. This lists common fonts, by operating system.

The green checkmarks indicate very common fonts; yellow checkmarks indicate fonts which are somewhat less common.

Font	Windows						Mac MacOS	Linux Unix
	2000/XP	Vista	7	8	10	11
serif
Cambria
Constantia
Georgia
Georgia Pro
Georgia Pro Cond
Palatino Linotype
Rockwell Nova
Rockwell Nova Condensed
Times New Roman
Times
sans-serif
Arial
Arial Black
Arial Narrow
Arial Nova
Arial Nova Condensed
Aptos
Calibri
Candara
Corbel
Gill Sans Nova
Gill Sans Nova Cond
Helvetica
Impact
Microsoft Sans Serif
Neue Haas Grotesk Text Pro
Segoe UI
Tahoma
Trebuchet MS
Verdana
Verdana Pro
Verdana Pro Cond
cursive
Comic Sans MS
fantasy
monospace
Andale Mono
Consolas
Courier
Courier New
Lucida Console

Until Aug 2002 Microsoft made its Core Web Fonts freely available in Windows and Mac formats; the fonts could also be installed on Unix and Linux systems. Up-to-date Core Web Fonts, sadly, are now legally available only with various Microsoft products, but old versions are legally available elsewhere.

Microsoft created a set of 6 excellent fonts for Vista and Office 2007 — Calibri, Cambria, Candara, Consolas, Con­stantia, and Corbel — that should be popular web fonts: however, these fonts are smaller than traditional fonts, therefore there is a risk that, if you use them for body text, users will find the text harder to read.

Microsoft offers a free font Selawik which is like its system font Segoe UI but which may be used on non-Windows systems.

Microsoft created a set of excellent fonts for Windows 10 — Arial Nova, Arial Nova Condens­ed, Georgia Pro, Georgia Pro Cond, Gill Sans Nova, Gill Sans Nova Cond, Neue Haas Grotesk Text Pro, Rockwell Nova, Rockwell Nova Con­dens­ed, Verdana Pro, and Verdana Pro Cond — that should be popular web fonts: however, many are smaller than traditional fonts, there­fore there is a risk that, if you use them for body text, users will find text harder to read.

Microsoft created a set of excellent fonts for Office 2021 — Aptos (alias Bierstadt), Grandview, Seaford, Skeena, and Tenorite — with Aptos chosen in mid-July of 2023 as the new default Office font.

Microsoft offers a resource to find out what fonts come with their products, though sadly it isn’t kept up-to-date.

Google has collected hundreds of free fonts, some quite good, available using Google’s Font API. Very few visitors to websites will have them installed on their PCs, however, its fonts can be embedded, which makes them available to everyone: for details, see Choosing Embedded (Downloaded) Fonts.

Fonts supplied with Apple’s MacOS are listed in Wikipedia.

 Top of Page         Legal Notices