CSS - 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.

Example

 

CSS
@font-face {
  font-family: examplefont;
  src: local(Example Font), url('examplefont.woff') format("woff"),
      url('examplefont.woff') format("opentype");
}

Syntax  

CSS
/* <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 */

/* <lt>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.ttf) format("opentype");

Values

<url> [ format( <string># ) ]?
Specifies an external reference consisting of a URL followed by an optional hint describing 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 to download the font resource. If no format hints are supplied, the font resource is always downloaded.
<font-face-name>
Specifies the 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.

Formal syntax

CSS
<a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/url" title=""><url></a> format(<a href="css/string" title=""><string></a><a href="css/value_definition_syntax#hash_mark_(.23)" title="Hash mark">#</a>)<a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> local(<a href="css/@font-face/src#family-name"><family-name></a>) <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#hash_mark_(.23)" title="Hash mark">#</a><p>where <br><code><family-name> = <a href="css/string" title=""><string></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <IDENT><a href="css/value_definition_syntax#plus_(.2b)" title="Plus">+</a></code></p>

Description  

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.

Its value 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) is used.

Related at-rule@font-face
Initial valuen/a (required)
Mediaall
Computed valueas specified
Canonical orderorder of appearance in the formal grammar of the values

Browser Compatibility  

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 4.0 12.0 3.5 (1.9.1) 6.0 9.0 3.1
WOFF 5.0 ? 3.6 (1.9.2) 9.0 11.1 5.1
WOFF 2 36.0 ? 35.0 (35.0)[1] No support 26.0 No support
TrueType 4.0 ? 3.5 (1.9.1) 9.0 10.0 3.1
OpenType 4.0 ? 3.5 (1.9.1) 9.0 10.0 3.1
Embedded OpenType No support ? No support 6.0 No support No support
SVG Font 4.0 ? No support[2] No support 9.0 3.2
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mini Opera Mobile Safari Mobile
Basic support 2.2 1.0 (1.9.1) 10.0 No support 12.0 3.1
WOFF ? ? ? ? ? ?
WOFF 2 ? ? ? ? ? ?
TrueType ? ? ? ? ? ?
OpenType ? ? ? ? ? ?
Embedded OpenType ? ? ? ? ? ?
SVG Font ? ? ? ? ? ?

[1] This feature is implemented behind the preference gfx.downloadable_fonts.woff2.enabled, initially defaulting to false. Since Gecko 39.0 (Firefox 39.0 / Thunderbird 39.0 / SeaMonkey 2.36) this preference defaults to true.

[2] This feature is not implemented yet. See bug 119490.

Specifications  

Specification Status Comment
CSS Fonts Module Level 3
The definition of 'src' in that specification.
Candidate Recommendation Initial definition

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/@font-face/src

@font-face CSS CSS Descriptor CSS Fonts NeedsMobileBrowserCompatibility Reference