<pre class="brush: css notranslate"><code><span class="token comment">/ &lt;url&gt; values /</span> <span class="token property">src</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>https://somewebsite.com/path/to/font.woff<span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token comment">/ Absolute URL /</span> <span class="token property">src</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>path/to/font.woff<span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token comment">/ Relative URL /</span> <span class="token property">src</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>path/to/font.woff<span class="token punctuation">)</span></span> <span class="token function">format</span><span class="token punctuation">(</span><span class="token string">"woff"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/ Explicit format /</span> <span class="token property">src</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'path/to/font.woff'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token comment">/ Quoted URL /</span> <span class="token property">src</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>path/to/svgfont.svg#example<span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token comment">/ Fragment identifying font /</span> <span class="token comment">/ &lt;font-face-name&gt; values /</span> <span class="token property">src</span><span class="token punctuation">:</span> <span class="token function">local</span><span class="token punctuation">(</span>font<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/ Unquoted name /</span> <span class="token property">src</span><span class="token punctuation">:</span> <span class="token function">local</span><span class="token punctuation">(</span>some font<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/ Name containing space /</span> <span class="token property">src</span><span class="token punctuation">:</span> <span class="token function">local</span><span class="token punctuation">(</span><span class="token string">"font"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/ Quoted name /</span> <span class="token comment">/ Multiple items /</span> <span class="token property">src</span><span class="token punctuation">:</span> <span class="token function">local</span><span class="token punctuation">(</span>font<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>path/to/font.svg<span class="token punctuation">)</span></span> <span class="token function">format</span><span class="token punctuation">(</span><span class="token string">"svg"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>path/to/font.woff<span class="token punctuation">)</span></span> <span class="token function">format</span><span class="token punctuation">(</span><span class="token string">"woff"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>path/to/font.otf<span class="token punctuation">)</span></span> <span class="token function">format</span><span class="token punctuation">(</span><span class="token string">"opentype"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre>

src

The src CSS descriptor of the @font-face rule specifies the resource containing font data. It is required for the @font-face rule to be valid.

Syntax

/* <url> values */ src: url(https://somewebsite.com/path/to/font.woff); /* Absolute URL */ src: url(path/to/font.woff);                         /* Relative URL */ src: url(path/to/font.woff) format("woff");          /* Explicit format */ src: url('path/to/font.woff');                       /* Quoted URL */ src: url(path/to/svgfont.svg#example);               /* Fragment identifying font */  /* <font-face-name> values */ src: local(font);      /* Unquoted name */ src: local(some font); /* Name containing space */ src: local("font");    /* Quoted name */  /* Multiple items */ src: local(font), url(path/to/font.svg) format("svg"),      url(path/to/font.woff) format("woff"),      url(path/to/font.otf) format("opentype"); 

Values

Specifies an external reference consisting of a <url>(), followed by an optional hint using the format() function to describe the format of the font resource referenced by that URL. The format hint contains a comma-separated list of format strings that denote well-known font formats. If a user agent doesn't support the specified formats, it skips downloading the font resource. If no format hints are supplied, the font resource is always downloaded.

Specifies the full name or postscript name of a locally-installed font face using the local() function, which uniquely identifies a single font face within a larger family. The name can optionally be enclosed in quotes.

Description

The value of this descriptor is a prioritized, comma-separated list of external references or locally-installed font face names. When a font is needed the user 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.

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 simple 1-based indexing scheme (e.g., "font-collection#1" for the first font, "font-collection#2" for the second font, etc.) is used.

Formal definition

Formal syntax

[ <url> [ format( <string># ) ]? | local( <family-name> ) ]#
where <family-name> = <string> | <custom-ident>+

Examples

Specifying font resources using url() and local()

/* a regular font face: */ @font-face {   font-family: examplefont;   src: local(Example Font),        url('examplefont.woff') format("woff"),        url('examplefont.otf') format("opentype"); }  /* a bold font face of the same family: */ @font-face {   font-family: examplefont;   src: local(Example Font Bold), /* full font name */        local(Example Font-Bold), /* postscript name */        url('examplefont.woff') format("woff"),        url('examplefont.otf') format("opentype");   font-weight: bold; } 

Specifications

See also

Last modified: Jan 8, 2022, by MDN contributors