CSS @font-face Cheat Sheet

Fact Sheet

The @font-face rule:

allows linking to fonts that are automatically fetched and activated when needed;
allows loading locally-installed fonts on the user's computer, or from a remote server;
instructs the browser to download a font from where it is hosted, then, display it as specified in the stylesheet;
allows designers to not be limited to only fonts loaded on a user’s computer, which also vary depending on the OS;
makes sticking with "Web safe" fonts unnecessary.

Usage

Must consist of the @font-face at-keyword.
At-keyword is followed by a block of descriptor declarations.
Each @font-face rule specifies a value for every font descriptor, either implicitly or explicitly.
Name must first be defined for a font (e.g. myFont) before pointing to the font file.
Defined names are wrapped in single or double quotes.
To use the defined font for an HTML element, refer to the name of the font (myFont) through the font-family property:
Describing the format of the font resource referenced by the URL/path is optional.

Syntax

To use a font called DavidOfili, see the rules below:

@font-face {

font-family: DavidOfili;
src: url("/fonts/DavidOfili.woff2") format("woff2");

}

p {

font-family: DavidOfili, serif;

}

The user agent will download DavidOfili and use it when rendering text within paragraph elements. If for some reason the site serving the font is unavailable, the default serif font will be used.

More Examples

Another @font-face rule containing descriptors for bold text must be added when used.

@font-face {

font-family: myNewFont;
src: url("/fonts/roboto_bold.woff") format("woff");
font-weight: bold;

}

The file roboto_bold.woff is another font file that contains the bold characters for the Roboto font. Browsers will use this rule whenever a piece of text with the font-family myNewFont should render as bold. That way, you can have many @font-face rules for the same font.

Heads-Up

Define the @font-face rule before any style in the stylesheet.
Font files must be on the same domain as the page using them, unless HTTP access controls are used to relax this restriction.
@font-face cannot be declared within a CSS selector. For example, the following will not work.

.className {

@font-face {

font-family: DavidOfili;
src: local("Calibri-Bold"),
url("/fonts/DavidOfili-bold.woff") format("woff");
font-weight: bold;

}

Font Types

String	Font Format	Common extensions
"woff"	WOFF 1.0 (Web Open Font Format)	.woff
"woff2"	WOFF 2.0 (Web Open Font Format)	.woff2
"truetype"	TrueType	.ttf
"opentype"	OpenType	.ttf, .otf
"embedded-opentype"	Embedded OpenType	.eot
"svg"	SVG Font	.svg, .svgz

Browser Support

Font Format	Edge	Chrome	Firefox	Safari	Opera
TTF/OTF	9.0*	4.0	3.5	3.1	10.0
WOFF	9.0	5.0	3.6	5.1	11.1
WOFF2	14.0	36.0	39.0	10.0	26.0
SVG	Not supported	Not supported	Not supported	3.2	Not supported
EOT	6.0	Not supported	Not supported	Not supported	Not supported

Font Property Descriptors

Name	Value	Initial (Default)	Description
`font-family`	family-name	N/A	Required* \| Defines font family name.
`src`	URL	N/A	Required* \| Defines font download location / path.
`font-style`	normal \| italic \| oblique	normal	Optional \| Defines the font's design.
`font-weight`	normal \| bold \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900	normal	Optional \| Defines the font's thickness in appearance.
`font-stretch`	normal \| ultra-condensed \| extra-condensed \| condensed \| semi-condensed \| semi-expanded \| expanded \| extra-expanded \| ultra-expanded	normal	Optional \| Allows fonts' expansion and contraction.
`unicode-range`	urange #	U+0-10FFFF	Optional \| Defines the range of unicode characters the font supports.

References & Recommended Resources

Coyier, C. (2021, December 31). How to use @font-face in CSS. Retrieved September 13, 2022, from CSS-Tricks: https://css-tricks.com/snippets/css/using-font-face-in-css/
Mozilla. (2022, September 13). CSS: @font-face. Retrieved September 13, 2022, from MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face
W3C. (2018, September 20). Font Resources: The @font-face rule. Retrieved September 13, 2022, from W3C Recommendation: https://www.w3.org/TR/2018/REC-css-fonts-3-20180920/#font-face-rule
W3Schools. (2022). CSS @font-face Rule. Retrieved September 13, 2022, from W3Schools: https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp