CSS font-family Descriptor
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.
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.
@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.
Here's an example of using the
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.
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.
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.