src
Quick Summary for src (@font-face)
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.
Code Usage for src (@font-face)
/* <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"); 
More Details for src (@font-face)

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

<url> [ format( <string># ) ]?

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.

<font-face-name>

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

Related at-rule@font-face
Initial valuen/a (required)
Computed valueas specified

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

Specification
CSS Fonts Module Level 4 # src-desc

See also

font-display font-family font-stretch font-style font-weight font-variant font-feature-settings font-variation-settings unicode-range

Last modified: Jan 8, 2022, by MDN contributors

Select your preferred language English (US)EspañolFrançais日本語中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote

'Dawnie' used to say, "It's really quite simple: Be kind, and the rest takes care of itself. Never do anything that's not kind".


Dawn Atherton
Random CSS Property

hyphens

The hyphens CSS property specifies how words should be hyphenated when text wraps across multiple lines. It can prevent hyphenation entirely, hyphenate at manually-specified points within the text, or let the browser automatically insert hyphens where appropriate.
hyphens css reference