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.

@font-face {
font-family: "Gorgeous";
src: local("Gorgeous") format("woff2"),
url("https://example.com/gorgeous.woff") format("woff2"),
url("https://example.com/gorgeous.otf") format("otf");
}
@font-face 'src'

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-face {
font-family: "Gorgeous";
src: local("Gorgeous latin");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face 'unicode-range'

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-face {
font-family: "Gorgeous";
src: local("Gorgeous italic");
font-style: italic;
}
@font-face 'font-style'

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-face {
font-family: "Gorgeous";
src: local("Gorgeous medium");
font-weight: 400 500;
}
@font-face 'font-weight'

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-face {
font-family: "Gorgeous";
src: local("Gorgeous condensed");
font-stretch: 75% 100.0%;
}
@font-face 'font-stretch'

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.
@font-face {
font-family: "Gorgeous";
src: local("Gorgeous");
font-display: block;
}
@font-face 'font-display'
0

style > typography > @font-faceCustom fonts

🔗 🔎