Custom fonts
@font-face
Describe a custom font's characteristics and specify the location where the browser should look for it.
Property values
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:
property | description |
---|---|
font-family | An arbitrary name chosen by the CSS author, used here and in the font-family property |
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 |
src
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()
or url()
syntax.
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.
The format()
sub-property should be one of "woff", "woff2", "opentype", "truetype", "svg"
or "embedded-opentype"
.
Use a comma at the end of each src
spec when there is more than one possible location for the file.
Unicode-range
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 U+0020-00FF
.
font-style
The 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 font-style
request.
keyword | description |
---|---|
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
The 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-weight
request.
font's common name | font-weight |
---|---|
thin or hairline | 100 |
extra light or ultra light | 200 |
light | 300 |
normal | 400 |
medium | 500 |
semi bold or demi bold | 600 |
bold | 700 |
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
The 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 font-stretch
request.
keyword | equivalent percentage |
---|---|
ultra-condensed | 50% |
extra-condensed | 62.5% |
condensed | 75% |
semi-condensed | 87.5% |
normal | 100% |
semi-expanded | 112.5% |
expanded | 125% |
extra-expanded | 150% |
ultra-expanded | 200% |
% | any positive percentage |
When the font file can handle a range of stretched widths, specify this value using two percentages, for example:
font-display
The 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. |