url()

Specifies an external reference consisting of a<url>, followed by optional hints using theformat() andtech() component values that specify the format and font technology of the resource referenced by the URL. Theformat() andtech() components are a comma-separated list of strings of knownfont formats and technologies. If a user agent doesn't support the font technology or formats, it skips downloading the font resource. If no format or technology hints are supplied, the font resource is always downloaded.

format()

An optional declaration that follows theurl() value that provides a hint for the user agent on the font format.If the value is not supported or invalid, the browser may not download the resource, potentially saving bandwidth.If omitted, the browser will download the resource and then detect the format.If including a font source for backward-compatibility that is not in the list ofdefined keywords, enclose the format string in quotes.Possible values are described in theFont formats section below.

tech()

An optional declaration that follows theurl() value that provides a hint for the user agent on the font technology.The value fortech() may be one of the keywords described inFont technologies.

local(<font-face-name>)

Specifies the font name should the font be available on the user's device.Enclosing the font name in quotes is optional.

Note:For OpenType and TrueType fonts,<font-face-name> is used to match either the Postscript name or the full font name in the name table of locally available fonts. Which type of name is used varies by platform and font, so you should include both of these names to assure proper matching across platforms. Platform substitutions for a given font name must not be used.

Note:Locally available fonts may have been preinstalled on the user's device, or may have been actively installed by the user.

While the set of preinstalled fonts is likely to be the same for all users of a particular device, the set of user-installed fonts is not. By discovering the set of user-installed fonts, a site can therefore build afingerprint for the device, helping the site to track users across the web.

To prevent this, user agents may ignore user-installed fonts when usinglocal().

<font-face-name>

Specifies the full name or postscript name of a locally-installed font face using thelocal() component value, which uniquely identifies a single font face within a larger family.The name can optionally be enclosed in quotes. The font face nameis not case-sensitive.

The value of this descriptor is a prioritized, comma-separated list of external references or locally-installed font face names, where each resource is specified usingurl() orlocal().When a font is needed, theuser agent iterates over the set of references listed using the first one it can successfully activate.Fonts containing invalid data or local font faces that are not found are ignored and the user agent loads the next font in the list.

If multiplesrc descriptors are set, only the last declared rule that is able to load a resource is applied.If the lastsrc descriptor can load a resource and doesn't include alocal() font, the browser may download external font files and ignore the local version even if there is one available on the device.

As with other URLs in CSS, the URL may be relative, in which case it is resolved relative to the location of the style sheet containing the@font-face rule. In the case of SVG fonts, the URL points to an element within a document containing SVG font definitions. If the element reference is omitted, a reference to the first defined font is implied. Similarly, font container formats that can contain more than one font load only one of the fonts for a given@font-face rule. Fragment identifiers are used to indicate which font to load. If a container format lacks a defined fragment identifier scheme, a 1-based indexing scheme (e.g., "font-collection#1" for the first font, "font-collection#2" for the second font, etc.) is used.

If the font file is a container for multiple fonts, a fragment identifier is included to indicate the sub-font that should be used, as shown below:

/* WhichFont is the PostScript name of a font in the font file */src: url(collection.otc#WhichFont);/* WhichFont is the element id of a font in the SVG Font file */src: url(fonts.svg#WhichFont);

The following table shows the valid font keywords and their corresponding font formats.To check if a font format is supported by a browser within CSS, use the@supports rule.

Older non-normalizedformat() values have the following equivalent syntax; provided as a string enclosed in quotes for backward-compatibility reasons:

The following table shows valid values for thetech() descriptor and their corresponding font technologies.To check if a font technology is supported by a browser within CSS, use the@supports at-rule.

src =
<font-src-list>

<font-src> =
<url>[format(<font-format>)]?[tech(<font-tech>#)]?|
local(<family-name>)

<url> =
<url()>|
<src()>

<font-format> =
<string>|
collection|
embedded-opentype|
opentype|
svg|
truetype|
woff|
woff2

<font-tech> =
<font-features-tech>|
<color-font-tech>|
variations|
palettes|
incremental

<family-name> =
<string>|
<custom-ident>+

<url()> =
url(<string><url-modifier>*)|
<url-token>

<src()> =
src(<string><url-modifier>*)

<font-features-tech> =
features-opentype|
features-aat|
features-graphite

<color-font-tech> =
color-COLRv0|
color-COLRv1|
color-SVG|
color-sbix|
color-CBDT

The example below shows how to define two font faces with the same font family. Thefont-family is namedMainText. The first font face has a regular font, and the second one is a bold version of the same font family.

/* Defining a regular font face */@font-face {  font-family: MainText;  src:    local(Futura-Medium),    url("FuturaMedium.woff") format("woff"),    url("FuturaMedium.otf") format("opentype");}/* Defining a different bold font face for the same family */@font-face {  font-family: MainText;  src:    local(Gill Sans Bold) /* full font name */,    local(GillSans-Bold) /* postscript name */,    url("GillSansBold.woff") format("woff"),    url("GillSansBold.otf") format("opentype"),    url("GillSansBold.svg#MyFontBold"); /* Referencing an SVG font fragment by id */  font-weight: bold;}/* Using the regular font face */p {  font-family: MainText, sans-serif;}/* Font-family is inherited, but bold fonts are used */p.bold {  font-weight: bold;}

The following example shows how to use thetech() andformat() values to specify font resources.A font usingcolor-colrv1 technology andopentype format is specified using thetech() andformat() values.A color font will be activated if the user agent supports it, and anopentype non-color is provided as a fallback.

@font-face {  font-family: "Trickster";  src:    url("trickster-COLRv1.otf") format(opentype) tech(color-COLRv1),    url("trickster-outline.otf") format(opentype);}/* Using the font face */p {  font-family: "Trickster", fantasy;}

Browsers should use a@font-face with a singlesrc descriptor listing possible sources for the font.Since the browser will use the first resource that it is able to load, items should be specified in the order of your preference for their usage.

Generally this means that local files should appear before remote files and that resources withformat() ortech() constraints should appear before resources that don't have them (otherwise the less-constrained version would always be selected).For example:

@font-face {  font-family: "MgOpenModernaBold";  src:    url("MgOpenModernaBoldIncr.otf") format("opentype") tech(incremental),    url("MgOpenModernaBold.otf") format(opentype);}

A browser that does not supporttech() above should ignore the first item and attempt to load the second resource.

Some browsers do not yetignore invalid items, and instead fail the wholesrc descriptor if any value is invalid.If working with these browsers you can specify multiplesrc descriptors as fallbacks.Note that multiplesrc descriptors are attempted in reverse-order, so at the end we have our normal descriptor with all the items.

@font-face {  font-family: "MgOpenModernaBold";  src: url("MgOpenModernaBold.otf") format(opentype);  src: url("MgOpenModernaBoldIncr.otf") format("opentype") tech(incremental);  src:    url("MgOpenModernaBoldIncr.otf") format("opentype") tech(incremental),    url("MgOpenModernaBold.otf") format(opentype);}

The following example shows how to check if the user agent supports a font technology using the@supports rule.The block of CSS inside@supports will be applied if the user agent supportscolor-COLRv1 technology.

@supports font-tech(color-COLRv1) {  @font-face {    font-family: "Trickster";    src: url("trickster-COLRv1.otf") format(opentype) tech(color-COLRv1);  }  .colored_text {    font-family: "Trickster", fantasy;  }}

• @font-face
• @supports
• font-display
• font-family
• font-stretch
• font-style
• font-weight
• font-feature-settings
• font-variation-settings
• unicode-range