6

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; }

3 Answers 3

4

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

4

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:

0

It's for searching the user's system for a "calibri" font, and if it does not exist, it will load the font from the server instead.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.