What are web-safe fonts and are they still relevant?

Web-safe fonts are typefaces that come preinstalled on most computers and phones, so a website can use them without downloading anything. The classic list includes Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma, Trebuchet MS and Courier New, most of which date from Microsoft's Core Fonts for the Web project in the 1990s. Today the term is only partly accurate: these fonts are reliably present on Windows, macOS and iOS, but most Android phones and Linux systems don't include them and substitute similar fonts instead. They're still relevant, though no longer as the main way to style a website. Their job now is to be good fallbacks behind web fonts, the default choice in email, and a zero-cost option when speed matters more than a distinctive look.

When web fonts weren't an option, choosing a web-safe font was the only way to be sure visitors saw what you designed. Web fonts changed that, and system font stacks changed it again. In this article you'll learn where web-safe fonts came from, which ones are genuinely safe today on which platforms, how the generic CSS font families fit in, where web-safe fonts still earn their place, and how to write font stacks that fail gracefully.

Where Web-Safe Fonts Came From

In the early web, CSS could only name fonts that were installed on the visitor's machine. Designers needed fonts that were nearly everywhere. In 1996 Microsoft launched Core Fonts for the Web, a free package that included:

• Andale Mono
• Arial and Arial Black
• Comic Sans MS
• Courier New
• Georgia
• Impact
• Times New Roman
• Trebuchet MS
• Verdana
• Webdings

Georgia and Verdana, both designed by Matthew Carter, were drawn specifically for low-resolution screens, with large x-heights and generous spacing. Because these fonts shipped with Windows and were bundled on Macs for years, they became the de facto web-safe set. Microsoft ended free distribution of the package in 2002, but the fonts remain installed on Windows and macOS.

Which Fonts Are Actually Safe Today

"Web-safe" was always a probability rather than a guarantee, and the device landscape has shifted towards phones. Here's roughly where the classic fonts stand on current systems:

Font	Windows	macOS	iOS and iPadOS	Android	Typical Linux desktop
Arial	Yes	Yes	Yes	Substituted	Usually substituted
Helvetica	No	Yes	Yes	Substituted	Usually substituted
Times New Roman	Yes	Yes	Yes	Substituted	Usually substituted
Georgia	Yes	Yes	Yes	Substituted	Usually substituted
Verdana	Yes	Yes	Yes	Substituted	Usually substituted
Trebuchet MS	Yes	Yes	Yes	Substituted	Usually substituted
Tahoma	Yes	Yes	Varies	Substituted	Usually substituted
Courier New	Yes	Yes	Yes	Substituted	Usually substituted

"Substituted" means the browser uses a different installed font, usually one the system has mapped to that name or to the generic family. Android maps common names such as Arial to its own default sans-serif and Times New Roman to its default serif. Many Linux distributions provide metric-compatible replacements such as Liberation Sans for Arial, so layouts stay similar even though the letterforms differ. Windows doesn't include Helvetica at all, so browsers there move on to the next font in your stack.

The practical lesson: on a large share of mobile traffic, a web-safe font isn't the font you named. It's whatever the platform considers closest.

Generic Font Families

CSS defines generic family keywords that always resolve to something on every device. They're the final safety net at the end of every stack:

• serif: A serifed text font, such as Times New Roman, Georgia or Noto Serif, depending on the system.
• sans-serif: A sans text font, such as Arial, Helvetica or Roboto.
• monospace: A fixed-width font, such as Courier New, Menlo or DejaVu Sans Mono.
• cursive and fantasy: Decorative fonts whose results vary so much they're rarely useful.
• system-ui: The operating system's interface font, such as San Francisco, Segoe UI or Roboto. Widely supported.
• ui-serif, ui-sans-serif, ui-monospace and ui-rounded: Platform UI variants. At the time of writing these are mainly supported in Safari, so always follow them with other options.
• emoji and math: Families for emoji and mathematical notation, with varying support.

Generic families must not be quoted. Writing "sans-serif" in quotes makes the browser look for a font literally named sans-serif, which doesn't exist:

/* Correct */
body {
  font-family: Georgia, serif;
}

/* Wrong: the quoted name is treated as a specific font */
body {
  font-family: Georgia, "serif";
}

Are Web-Safe Fonts Still Relevant?

Yes, but their role has changed. Here's where they're still the right choice.

As Fallbacks Behind Web Fonts

Every web font can fail to load or load late. During that time visitors see your fallback, and with font-display: swap many of them see it for a noticeable moment on every first visit. A fallback with similar proportions keeps the layout stable and the page readable. Classic web-safe fonts are still the best-known options for this.

In Email

Many email clients, including Gmail and Outlook on Windows, don't load web fonts. Installed fonts such as Arial, Helvetica, Verdana and Georgia are what most subscribers actually see. See how to choose fonts for email newsletters for a full setup.

For Speed-Critical or Low-Bandwidth Sites

Using installed fonts means zero font requests, no invisible text and no swap-related layout shift. For government services, internal tools, sites aimed at slow networks and pages where performance budgets are tight, that trade-off can be worth more than a custom typeface.

Where They're Less Useful

As a design choice for a modern brand, the classic set is limited. Arial and Times New Roman can feel generic, and on Android you don't get them anyway. If you want a native look with no downloads, a system font stack using system-ui generally gives a more contemporary result than the 1990s web-safe list.

Writing Reliable Font Stacks

A good font stack lists fonts from most to least preferred, choosing each fallback for similar proportions, and ends with a generic family.

:root {
  /* Humanist sans: wide and very legible */
  --stack-verdana: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;

  /* Neo-grotesque sans */
  --stack-helvetica: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", Arimo, sans-serif;

  /* Screen-friendly serif */
  --stack-georgia: Georgia, Cambria, "Noto Serif", "DejaVu Serif", serif;

  /* Traditional serif with metric-compatible fallbacks */
  --stack-times: "Times New Roman", Times, "Liberation Serif", Tinos, serif;

  /* Monospace */
  --stack-courier: "Courier New", Courier, "Liberation Mono", Cousine, monospace;
}

body {
  font-family: var(--stack-georgia);
}

A few rules to follow:

• Quote names with spaces: "Times New Roman" needs quotes; Georgia doesn't. Quoting single-word names is harmless.
• Put Helvetica before Arial if you prefer it on Apple devices; Windows doesn't have Helvetica, so it falls through to Arial.
• Include metric-compatible fonts: Liberation Sans and Arimo match Arial's widths, Liberation Serif and Tinos match Times New Roman, and Liberation Mono and Cousine match Courier New. They keep line breaks consistent on Linux and ChromeOS.
• Always end with a generic family so something reasonable appears in every case.

Web Font First, Web-Safe Behind

The most common modern pattern is a web font with a carefully chosen web-safe fallback:

@font-face {
  font-family: "Merriweather";
  src: url("/fonts/merriweather-variable.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}

body {
  font-family: "Merriweather", Georgia, "Times New Roman", serif;
}

Georgia is the natural partner here: both are screen-oriented serifs with large x-heights.

Matching the Fallback's Size

Even close fallbacks differ slightly in width and height, which causes a jump when the web font swaps in. You can build an adjusted fallback face from an installed font with local() and override its metrics:

@font-face {
  font-family: "Merriweather Fallback";
  src: local("Georgia");
  size-adjust: 112%;
  ascent-override: 88%;
  descent-override: 24%;
  line-gap-override: 0%;
}

body {
  font-family: "Merriweather", "Merriweather Fallback", Georgia, serif;
}

These percentages are illustrative. The right values depend on the exact fonts, so calculate them from both fonts' metrics or adjust by comparing rendered text.

Checking Which Font Is Actually Used

The font you name isn't necessarily the font that renders. In Chrome or Edge DevTools, select an element, open the Computed tab and scroll to Rendered Fonts to see the real font used. Firefox shows the same information in its Fonts panel.

To test from JavaScript whether a font is installed, you can compare text widths against a generic fallback. If the measurement differs from both the serif and sans-serif baselines, the named font is present:

function isFontInstalled(name) {
  const text = "mmmmmmmmmmlli1WQ";
  const ctx = document.createElement("canvas").getContext("2d");
  const width = (family) => {
    ctx.font = `72px ${family}`;
    return ctx.measureText(text).width;
  };

  return ["monospace", "serif", "sans-serif"].some(
    (generic) => width(`"${name}", ${generic}`) !== width(generic)
  );
}

for (const font of ["Arial", "Georgia", "Verdana", "Segoe UI", "Menlo"]) {
  console.log(font.padEnd(10), isFontInstalled(font));
}

Example output on a Windows machine:

Arial      true
Georgia    true
Verdana    true
Segoe UI   true
Menlo      false

Menlo is a macOS font, so it reports false on Windows. Some browsers also restrict which installed fonts pages can detect, to reduce fingerprinting, so treat results as a debugging aid rather than something to build features on.

Web-Safe Fonts vs System Font Stacks

The two ideas are related but not identical:

	Classic web-safe fonts	System font stack
Example	Arial, Georgia, Verdana	system-ui, Segoe UI, Roboto
Look	Same named font on desktop where available	Native UI font on each platform
Consistency	Similar across Windows and Apple, substituted elsewhere	Different on each platform by design
Best for	Fallbacks, email, documents	Interfaces, apps, fast sites

Both download nothing. Choose web-safe fonts when you want a particular, familiar typeface where possible, and a system stack when you want the interface to feel native.

---

FAQ: Web-Safe Fonts

---

Conclusion

Web-safe fonts are the typefaces you can expect to find already installed, led by Arial, Helvetica, Georgia, Verdana, Times New Roman and Courier New. They're reliably present on Windows and Apple devices, but Android and Linux usually substitute their own fonts, so "safe" really means "safe to name, with something sensible appearing everywhere".

They remain relevant in specific roles: as fallbacks behind web fonts, as the backbone of email typography, and as a no-cost option for fast or low-bandwidth sites. Write stacks that move from your preferred font to close web-safe matches, include metric-compatible fonts for Linux, end with a generic family, and check the rendered font in DevTools to be sure visitors see what you intended.