Sean Conklin, WooCommerce Freelance Developer in California, Sean@CodedCommerce.com, vm: (818) 835-5960
Cart
My account

Browser-safe fonts and page performance

04/15/2021
Comparison chart of font styles between browser synthesis and actual font styles between weights 300-800 and italic versus normal

Fonts are one of the more critical web page performance items. Some sites load unnecessary fonts, font styles, font formats, failing to set them to load in display:swap mode, or failing to declare the unicode-range to load. Any of these can deteriorate performance.

Thirty-plus fonts most devices already have

There’s no need to load the below fonts with scripts or CSS. The majority of devices support these natively.

  • Andale Mono
  • Arial
  • Arial Black
  • Arial Narrow
  • Arial Rounded MT Bold
  • Baskerville
  • Bodoni, Bodoni 72, Bodoni MT
  • Bradley Hand
  • Brush Script MT
  • Cambria
  • Century Gothic
  • Comic Sans MS
  • Consolas
  • Copperplate
  • Courier
  • Courier New
  • Dejavu Sans
  • Didot
  • Franklin Gothic
  • Garamond
  • Georgia
  • Gill Sans
  • Impact
  • Lucida Console
  • Lucida Grande
  • Lucida Sans
  • Luminari
  • Microsoft Sans Serif
  • Monaco
  • Palatino
  • Papyrus
  • Tahoma
  • Times New Roman
  • Trebuchet MS
  • Verdana

Fallback

You may use the above fonts directly or decide to use them for fallback so you can limit the primary fonts loaded to specific formats or styles and fallback to the above more economically than loading extra fonts.

serif and sans-serif are the safest to use for fallback. These will kick-in if one of the above fonts is missing from the device’s operating system or if there is a problem rendering a font resource.

CSS styling fonts

CSS rules can style fonts synthetically. For fonts loaded from a resource or file these are not as correct as using font styles from the font author. They can save you from loading additional font styles from a font resource, depending on how important the styles are to your design and content. There’s also newer variable fonts where the styling synthesis comes from the font resource itself.

Here’s a list of CSS font styling rules to consider for your projects.

  • font-optical-sizing
  • font-stretch
  • font-style: italic, oblique
  • font-variation-settings
  • letter-spacing
  • text-decoration: overline, line-through, underline
  • text-shadow
  • weight: 100-900
  • -webkit-text-stroke

External resources on browser-safe fonts

  • CSS Fonts: A complete collection of web safe CSS font stacks
  • W3Schools: CSS Web Safe Fonts
  • Web.dev: Reduce WebFont Size

Share this:

  • Mail
  • Facebook
  • LinkedIn
  • Reddit
  • Twitter

Need help?

Request your free introduction call

Contact form
close

Search this site

Blog categories

  • Blog (87)
    • Events (11)
    • Marketing tips (26)
    • Official blog reposts (10)
    • Popular (9)
    • Technical tips (58)
    • Videos (12)

Product categories

  • Services44 products
  • WooCommerce code snippets261261 products
    • Back-end code snippets7070 products
      • Admin interface4949 products
      • Run-once2121 products
    • Front-end code snippets163163 products
      • Email notifications1818 products
      • Cart2424 products
      • Checkout2828 products
      • Elementor code snippets99 products
      • JetPack code snippets44 products
      • Navigation menus22 products
      • Payments66 products
      • Product pages2929 products
      • Search88 products
      • Shop and product categories1818 products
      • Storefront theme1717 products
      • User accounts2323 products
    • Site-wide code snippets4242 products
  • WooCommerce plugins44 products

Copyright © 2018-2023 Coded Commerce, LLC. Privacy policy
Automattic Inc. owns and oversees the trademarks for Woo™ and WooCommerce®.