@font-face | Frontend Practical Guide

Overview

The @font-face CSS at-rule creates a custom font-family value. The at-rule's descriptors set the font's name, source, and various display settings.

Browser support

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`@font-face`	1	12	3.5	3.1	18	2
DOM API
`CSSFontFaceRule` The CSSFontFaceRule interface represents an @font-face at-rule.	1	12	3.5	3.1	18	2
`style` The read-only style property of the CSSFontFaceRule interface returns a CSSFontFaceDescriptors object representing the descriptors available in the @font-face rule's body.	1	12	3.5	3.1	18	2
CSS at-rule
`OpenType CBDT CBLC` OpenType CBDT and CBLC rendering	66	79			66
`OpenType SBIX` OpenType SBIX rendering	66	79		9.1	66	9.3
`WOFF` WOFF (the Web Open Font Format) is a web font format developed by Mozilla in concert with Type Supply, LettError, and other organizations. It uses a compressed version of the same table-based sfnt structure used by TrueType, OpenType, and Open Font Format, but adds metadata and private-use data structures, including predefined fields allowing foundries and…	6	12	3.5	5.1	18	5
`WOFF 2` WOFF (the Web Open Font Format) is a web font format developed by Mozilla in concert with Type Supply, LettError, and other organizations. It uses a compressed version of the same table-based sfnt structure used by TrueType, OpenType, and Open Font Format, but adds metadata and private-use data structures, including predefined fields allowing foundries and…	36	14	39	10	36	10
`font-family` The font-family CSS descriptor sets the font family for a font specified in an @font-face at-rule.	4	12	3.5	3.1	18	2
`src` The src CSS descriptor for the @font-face at-rule specifies the resource containing font data. It is required for the @font-face rule to be valid.	4	12	3.5	3.1	18	2
`src.drop invalid item` Drop invalid item (not src string)	108	108	109		108
`src.format keyword` `format(keyword)`	108	108	105	4	108	5
`src.format variations` Non-standard `format('*-variations')`	66	17	62	11	66	11
`src.tech keyword` `tech(keyword)`	108	108	107	17	108	17
`unicode-range` The unicode-range CSS descriptor sets the specific range of characters to be used from a font defined using the @font-face at-rule and made available for use on the current page. If the page doesn't use any character in this range, the font is not downloaded; if it uses at least one, the whole font is downloaded.	1	12	36	3.1	18	3
Other
`css.types.url` The url() CSS function is used to include a file. The parameter is an absolute URL, a relative URL, a blob URL, or a data URL. The url() function can be passed as a parameter of another CSS function, like the attr function. Depending on the property for which it is a value, the resource sought can be an image, font, or a stylesheet. The url() functional…	1	12	1	1	18	1

1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS

@font-face {
  font-family: "MyFont";
  src: url("/fonts/myfont.woff2") format("woff2"),
       url("/fonts/myfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "MyFont", sans-serif;
}

Live demo

fontuit

@font-face fontuit demo.

PreviewFullscreen

Font-display

@font-face Font-display demo.

PreviewFullscreen

fo-matpriority

@font-face fo-matpriority demo.

PreviewFullscreen

Use cases

Using @font-face
The @font-face CSS at-rule creates a custom font-family value. The at-rule's descriptors set the font's name, source, and various display settings.

Cautions

May not be supported in older browsers.

Overview

Browser support

Syntax

Live demo

fontuit

Font-display

fo-matpriority

Use cases

Using @font-face

Cautions

Accessibility

Related links