Fonts (CSS)

Importing and using external fonts properly in CSS.

System Defaults/Safe Font Stacks[2]

This stack is a sans-serif font that will work on most browsers. Github and Wordpress currently implement this.

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

A new feature that has pretty good coverage allows the use of system-ui in place of the -apple-system and BlinkMacSystemFont.[3]

Using @font-face

@font-face {
  font-family: 'Verlag Condensed Bold';
  src: url('...');
  [ unicode-range: <unicode-range>; ]
  [ font-variant: <font-variant>; ]
  [ font-feature-settings: <font-feature-settings>; ]
  [ font-variation-settings: <font-variation-settings>; ]
  [ font-stretch: <font-stretch>; ]
  font-weight: bold;
  [ font-style: <font-style>; ]

You can include multiple src values via a call to the user's fonts via local("Font Name"), url("..."), as well as specifying formats after the URL (url("...") format("truetype"),), all separated by commas and ending with a semicolon.

@import vs. <link>

To bring in another stylesheet with a font attached, Google Fonts and others offer an @import option. This unfortunately is blocking and will delay all other loading until that import is complete. Instead, include the URL in a <link> and it will load all elements at the same time.

<link href=',400italic,700' rel='stylesheet' type='text/css'>



Last modified: 202401040446