System and web fonts

System fonts are already installed on a device, so they appear instantly and need no download. Arial, Helvetica and Georgia are common examples.

Web fonts are downloaded by the browser when a page opens, using the CSS @font-face rule. Today they are usually WOFF2 files, a compressed format made for the web. They let a brand use its own typeface everywhere.

The trade-off is speed. Pro tip: always name a system font as a fallback, so text stays readable while the web font loads or if it fails, as the before-and-after shows.