what is the role of "src" and "url" propery?

Question

While rendering the following code, what is the role of "src" propery?

@font-face { 
    font-family: "calibriforh1"; 
    src: local("calibri"), url(calibri.woff); 
}

h1 { font-family: "calibriforh1", arial, sans-serif; }

Answer 1

The src property is used to identify where the font file is located. It can be defined as local and/or via a remote url. In this case the definition is specifying that the font calibri should be used if it is installed on the users computer. If not it needs to look for the file calibri.woff in the css folder. Check out the MDN page on Font-face

Answer 2

Info from, and further information available from the links posted below

The load() method of font-face which looks like this:

interface FontFace {
  attribute DOMString family;
  attribute DOMString style;
  attribute DOMString weight;
  attribute DOMString stretch;
  attribute DOMString unicodeRange;
  attribute DOMString variant;
  attribute DOMString featureSettings;
  readonly attribute FontFaceLoadStatus status;
  Promise<FontFace> load();
  readonly attribute Promise<FontFace> loaded;
};

identifies src as a slot. The src descriptor is required for the @font-face rule to be valid according to spec. The purpose of it is to define the separation of resources, whereas the subsequent url value actually specifies the location of the external resource in which comprises the font files or glyphs.

Specifically..

The internal [[Urls]] slot of the FontFace object is set to the value of the @font-face rule’s src descriptor, and reflects any changes made to the src descriptor.

                ► CSS Font Loading Module Level 3 (s.2.3)

The load() method of FontFace uses CORS-enabled fetch to read the font data specified in the font-face files. For fonts constructed from binary data, or fonts that are already loading or loaded, it does nothing.

When the render client reads the font-face code, it iterates over the src references until it finds one it can successfully render. Subsequent values are then never processed.

For the sake of simplicity, you can compare the relation of src and url to that of a key value array.

Proper syntax for src is

<url> [format(<string> #)]? | <font-face-name> ] # 

Further:

• CSS Fonts Module Level 3
• CSS Font Loading Module Level 3
• HTML5 Vocabulary, CORS-enabled fetch