CSS font-family Descriptor

The CSS font-family descriptor is used with the @font-face at-rule to define the font family name that will be used in all CSS font family name matching.

The font-family descriptor is not to be confused with the font-family property. The font-family descriptor is used solely with the @font-face at-rule to name a font. The font-family property is then used elsewhere in the style sheet to refer to that font.

The @font-face rule accepts a number of descriptors that define the location of a font resource, either locally or externally, along with the style characteristics of an individual face. These descriptors apply solely within the context of the @font-face rule in which they are defined.

The font-family descriptor is a required descriptor of the @font-face rule (as is the src descriptor).

Here's an example of using the font-family descriptor.

However, you don't necessarily have to use the actual font's name (i.e. the name in the underlying font data) — you can choose a more contextual name for the font if you wish. So you could do this:

So, the name you provide under the font-family descriptor is the name that you refer to within your CSS declarations whenever you want to refer to that font.

Naming Conflicts

If the name you provide to the font-family descriptor is the same as an actual font available on the user's system, it effectively hides the underlying font for documents that use the stylesheet. Therefore, you can choose font-family names without worrying about any conflicts with font family names available in the user's system.

So if you do this:

the "goudy.woff" font will be used even if there's already another font called "Base" on the user's computer.

However, you can override this behavior by using local() within the src descriptor. This value can be used in conjunction with url() in order to download a copy of the font if a local one isn't available.

Official Syntax

The font-family descriptor has the following syntax:

The family-name value refers to the name of the font. This is the name that you will use when you reference this font elsewhere in the style sheet.

Official Specifications

The font-family descriptor is defined in CSS Fonts Module Level 3 (W3C Candidate Recommendation 3 October 2013).