Describe a custom font's characteristics and specify the location where the browser should look for it.
The specification of an
@font-face rule includes at least two properties:
font-family which is an arbitrary name, and
src which is a list of the places where the browser might be able to obtain the font file.
The complete set of properties that can be specified is:
|font-family||An arbitrary name chosen by the CSS author, used here and in the |
|src||Specify the URL where the font file can be downloaded|
|unicode-range||The Unicode glyphs included in the font file|
|font-style||Describe whether the font is a normal, italic, or oblique variant|
|font-weight||Specify the thickness of the font|
|font-stretch||Describe whether the font is a condensed or expanded variant|
|font-variant||Does the font file have any special variants for capitalization, numbers, ligatures, east asian languages or alternate glyphs|
|font-display||What should the browser do while waiting for the font file to be downloaded|
Specify one or more locations where the font file can be found. Optionally, specify its font encoding technology using the
format() sub-property. Locations can be specify using either the
Local fonts are obtained from the device where the browser is hosted. The
local() syntax expects a font name, not a path. Remotely downloaded files are obtained via HTTP request. The
url() syntax expects a path to the file. It can be relative to the document's current domain, or fully qualified, including the remote's domain name and full path to the font file.
format() sub-property should be one of
"woff", "woff2", "opentype", "truetype", "svg" or
Use a comma at the end of each
src spec when there is more than one possible location for the file.
Lists the range of Unicode glyphs included in the font file when the full set of glyphs is too large to fit in a single file.
Specify the lowest and highest code point included in the font file. Use notation like
font-style property specifies whether the font file contains a normal, italic or oblique variant of the family. This is used in the browser's font-matching algorithm to align this font with an element's
|normal||The basic font|
|italic||A true italicized variant of the font family|
|oblique||An artificially sloped variant of the font family|
|oblique X-deg||An artificial variant sloped with the specified angle|
|oblique min-deg max-deg||An artificial variant sloped somewhere between the two specified angles|
font-weight property specifies whether the font file contains a normal, thick or thin variant of the family. This is used in the browser's font-matching algorithm to align this font with an element's
|font's common name||font-weight|
|thin or hairline||100|
|extra light or ultra light||200|
|semi bold or demi bold||600|
|extra bold or ultra bold||800|
|black or heavy||900|
When the font file can handle a range of weights, specify this value using two numbers, for example:
font-stretch property specifies whether the font file contains a normal, condensed or expanded variant of the family. This is used in the browser's font-matching algorithm to align this font with an element's
|%||any positive percentage|
When the font file can handle a range of stretched widths, specify this value using two percentages, for example:
font-display property specifies what a browser should do while waiting for the font file to be downloaded.
|block||Render text with an invisible fallback font for a short time until the font is downloaded. If the font is not obtained within that short period, then make the fallback font visible. If the font is eventually obtained, rerender the text replacing the fallback with the actual font.|
|swap||Briefly render the text with a visible fallback font. When the font is finally obtained, rerender the text replacing the fallback with the actual font.|
|fallback||Briefly render the text with a visible fallback font, waiting just a short time to obtain the actual font. If it can be obtained quickly enough, use it instead of the fallback. If it can't be obtained quickly enough, give up trying and stay with the fallback.|
|optional||If the font can't be obtained almost immediately, give up trying and render the text with the fallback.|