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
<url> [ format( <string># ) ]?
- Specifies an external reference consisting of a
<url>
, followed by an optional hint using theformat()
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. <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.
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
Related at-rule | @font-face
|
Initial value | n/a (required)
|
Computed value | as specified |
Formal syntax
[ <url> [ format( <string># ) ]? | local( <family-name> ) ]#where <family-name> = <string> | <custom-ident>+
Examples
Specifying font resources using url() and local()
@font-face {
font-family: examplefont;
src: local(Example Font),
url('examplefont.woff') format("woff"),
url('examplefont.otf') format("opentype");
}
Specifications
Specification | Status | Comment |
---|---|---|
CSS Fonts Module Level 3The definition of 'src' in that specification. | Candidate Recommendation | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
src
|
Chrome
Full support 4 |
Edge
Full support 12 |
Firefox
Full support 3.5 |
IE
Full support 6 |
Opera
Full support 10 |
Safari
Full support 3.1 |
WebView Android
Full support 2.2 |
Chrome Android
Full support 18 |
Firefox Android
Full support 4 |
Opera Android
Full support 10.1 |
Safari iOS
Full support 3.1 |
Samsung Internet Android
Full support 1.0 |
Support for format keywords
|
Chrome
No support No |
Edge
No support No |
Firefox
No support No |
IE
No support No |
Opera
No support No |
Safari
Full support 4 |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android
No support No |
Opera Android
No support No |
Safari iOS
Full support 5 |
Samsung Internet Android
No support No |
Legend
- Full support
- Full support
- No support
- No support
See also
font-display
font-family
font-stretch
font-style
font-weight
font-variant
font-feature-settings
font-variation-settings
unicode-range
src by Mozilla Contributors is licensed under CC-BY-SA 2.5.