Fonts (CSS)

Importing and using external fonts properly in CSS.

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 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: 202107020507