Estelle Weyl | @estellevw | Github | Press key to advance.

Fonts

  1. Implementing regular fonts
    • font-family property
    • Generic fonts
    • font-weight property
    • font-stretch property
    • font-style property
    • font-size property
      • rem, viewport and responsive sizes
    • font-size-adjust property
    • font-variant shorthand
    • line-height property
    • font property
    • font-size-adjust property
    • font-synthesis property
  1. @font-face
    • @font-face at-rule
    • font-family descriptor
    • src descriptor
      • src(), format() and local()
    • font-style, font-weight and font-stretch descriptors
    • unicode-range descriptor
    • Character subsets
    • font-feature-settings descriptor
    • Developer Tools
    • font-display descriptor, timeline & implementation
    • Icons
  2. Variable Fonts
    • Variable Fonts
    • font-variation-settings property
    • Font Style Matching

Some styles

font-family property

font-family property

font-family: [ <family-name> | <generic-family> ]#

Specifies a comma-separated <idents> list of fonts in priority order.

.newspaper {
  font-family: Times, Times New Roman, Georgia, serif;
}
.marketing {
  font-family: Verdana, Arial, Helvetica, sans-serif;
}
code {
  font-family: Lucida Console, Courier, monospace;
}

Generic font families

serif
Glyphs with finishing strokes, flared or tapering ends, or have actual serifed endings
sans-serif
Glyphs have stroke endings that are plain.
monospace
All glyphs have the same fixed width. Good for code.
cursive
Glyphs with joining strokes, connected letters
fantasy
Decorative, playful fonts
system-ui
Default user interface font on a given platform. Because typographic traditions vary widely across the world, this generic is provided for typefaces that don't map cleanly into the other generics.
math
Includes superscript and subscript, brackets that cross several lines, nesting expressions, and double struck glyphs for math.
emoji
Fonts that render emoji.
fangsong
A Chinese font between serif-style Song and cursive-style Kai forms often used for government documents

font-family property

This typeface is the font listed above

Comparison text: note if declaration fails, it goes to initial not inherited.

font-family property

  • Separated the font-family names with a comma
  • Quotes around family names are optional, but puncuation characters and words that start with a number must be escaped or quoted.
  • Browser displays the first font that is installed or will be downloaded (see @font-face in a bit)
  • Include a generic family name as a fallback in a font-family list in case the specified fonts aren't available
  • If declaration is invalide, it goes to initial, it's not inherited inherit).
  • If the main rendered font is missing characters, chars will be pulled from the next font-family in the list that has that character.
  • When a font is available but not in the style or variant declared, next font may be used

font-weight property

font-weight property

Sets the boldness of the font

normal | bold | bolder | lighter | <number>
Value Description
normal 400
bold 700
bolder inherit + 1 weight (900, 700 or 400)
lighter inherit - 1 weight (100, 400, or 700)

Number used to be 100 | 200 | 300 | 400 | 500| 600 | 700, but with variable fonts (discussed later), it's now any number 1 - 1000.

font-weight property

This typeface is not necessarily the weight 'as described'.

Comparison. Demonstrate variable versus regular fonts.

Variable v. distinct font weights

Site does not permit cross-origin framing
v-fonts.com

font-stretch property

font-stretch property

selects a normal, condensed, or expanded face from a font.

font-stretch:
  <percentage> (50% - 200%) |  normal (100%)
  ultra-condensed (50%)     |  semi-expanded (112.5%)
  extra-condensed (62.5%)   |  expanded (125%)
  condensed (75%)           |  extra-expanded (150%)
  semi-condensed (88.5%)    |  ultra-expanded (200%)

Most fonts have one or two values, but this comes into play with variable fonts

font-stretch property

Note the width of each character.

Comparison paragraph of text

Install the font

font-style property

font-style property

sets whether a font should be styled with a normal, italic, or oblique face from its font-family.

normal | italic | oblique <angle>?
  • By angle, -90deg to 90deg. Otherwise invalid.
  • Italic forms are generally cursive.
  • Font matching selects a font closest to the requested angle.
  • If no italic or oblique font, regular face may be used and sloped
  • use font-synthesis to control sloping behavior
  • For variable .ttf & .otf, use "slnt" for oblique and "ital" 1 for italic as font-variation-settings.
  • Note: OpenType "slnt" axis is defined with a positive angle meaning a counter-colockwise slant, the opposite direction to CSS.

font-style property

Note the angle of the vertical part of the glyphs.

Comparison paragraph of text

Install the font

font-size property

font-size property

Sets the size of the font. Also used to compute the size of em, ex, and other char based <length> units.

xx-small | x-small | small | medium | large | x-large | xx-large  
larger | smaller | <length> | <percentage>
  • Default is medium
  • em, ex, and % are relative to current parent's font size
  • Keyterms are good / accessible. Declaring on body and going larger and smaller works
  • px and other absolute values are bad for a11y, including viewport units
  • em can be hard to control due to compounding. Opt for rem instead.

rem

html {
    font-size: 62.5%;
}
p {
    font-size: 13px;
    font-size: 1.3rem;
}
small {
    font-size: 11px;
    font-size: 1.1rem;
}

font-size property

Every word's is nested

Comparison paragraph of text with no nesting

Responsive typography: vw units?!?!

Site does not permit cross-origin framing
Open

font-variant property

font-variant property

CSS Level 2.1

Selects the font that is small caps or not

font-variant: normal | small-caps;

font-variant shorthand property

CSS Fonts Module Level 3

Shorthand for font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures, and font-variant-east-asian.

normal | none | [ <common-lig-values> || <discretionary-lig-values> || 
<historical-lig-values> || <contextual-alt-values> || 
[ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || 
<numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || 
ordinal || slashed-zero || <east-asian-variant-values> || 
<east-asian-width-values> || ruby || [ sub | super ] ] 

 

font-variant-caps property

Controls the use of alternate glyphs for capital letters.

normal | small-caps  all-small-caps | petite-caps |
   all-petite-caps | unicase | titling-caps
normal
Deactivates of the use of alternate glyphs.
small-caps
Enables display of small capitals (OpenType feature: smcp). Small-caps glyphs typically use the form of uppercase letters but are reduced to the size of lowercase letters.
all-small-caps
Enables display of small capitals for both upper and lowercase letters (OpenType features: c2sc, smcp).
petite-caps
Enables display of petite capitals (OpenType feature: pcap).
all-petite-caps
Enables display of petite capitals for both upper and lowercase letters (OpenType features: c2pc, pcap).
unicase
Enables display of mixture of small capitals for uppercase letters with normal lowercase letters (OpenType feature: unic).
titling-caps
Enables display of titling capitals (OpenType feature: titl). Uppercase letter glyphs are often designed for use with lowercase letters. When used in all uppercase titling sequences they can appear too strong. Titling capitals are designed specifically for this situation.

font-variant-numeric property

Controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.

normal | ordinal | slashed-zero | lining-nums | proportional-nums | 
oldstyle-nums | tabular-nums | diagonal-fractions | stacked-fractions
normal
This keyword leads to the deactivation of the use of such alternate glyphs.
ordinal
This keyword forces the use of special glyphs for the ordinal markers, like 1st, 2nd, 3rd, 4th in English or a 1a in Italian. OpenType:s ordn.
slashed-zero
This keyword forces the use of a 0 with a slash; this is useful when a clear distinction between O and 0 is needed. It corresponds to the OpenType values zero.
<numeric-figure-values>
These values control the figures used for numbers. Two values are possible:
  • lining-nums activating the set of figures where numbers are all lying on the baseline. OpenType:s lnum.
  • oldstyle-nums activating the set of figures where some numbers, like 3, 4, 7, 9 have descenders. OpenType:s onum.
<numeric-spacing-values>
These values controls the sizing of figures used for numbers. Two values are possible:
  • proportional-nums activating the set of figures where numbers are not all of the same size. OpenType:s pnum.
  • tabular-nums activating the set of figures where numbers are all of the same size, allowing them to be easily aligned like in tables. OpenType:s tnum.
<numeric-fraction-values>
These values controls the glyphs used to display fractions. Two values are possible:
  • diagonal-fractions activating the set of figures where the numerator and denominator are made smaller and separated by a slash. OpenType:s frac.
  • stacked-fractions activating the set of figures where the numerator and denominator are made smaller, stacked and separated by a horizontal line. OpenType:s afrc.

font-variant-numeric

The 700 club is xenophobic!

font-variant-ligatures property

Controls which ligatures and contextual forms are used in textual content of the elements it applies to. This leads to more harmonized forms in the resulting text

normal | none | (no-)contextual | (no-)common-ligatures | 
 (no-)discretionary-ligatures | (no-)historical-ligatures;
normal
This keyword leads to the activation of the usual ligatures and contextual forms needed for correct rendering. The ligatures and forms activated depend on the font, language and kind of script. This is the default value.
none
This keyword specifies that all ligatures and contextual forms are disabled, even common ones.
<common-lig-values>
These values control the most common ligatures, like for fi, ffi, th or similar. They correspond to the OpenType values "liga" and "clig". Two values are possible:
  • common-ligatures Default. Activates common ligatures.
  • no-common-ligatures deactivates common ligatures.
<discretionary-lig-values>
These values control specific ligatures, specific to the font and defined by the type designer. They correspond to the OpenType values "dlig". Two values are possible:
  • discretionary-ligatures activates these ligatures.
  • no-discretionary-ligatures Default. Deactivates the ligatures.
<historical-lig-values>
These values control the ligatures used historically, in old books, like the German tz digraph being displayed ß. They correspond to the OpenType values "hlig". Two values are possible:
  • historical-ligatures Activates these ligatures.
  • no-historical-ligatures Default. Deactivates the ligatures.
<contextual-alt-values>
These values control whether letters adapt to their context—that is, whether they adapt to the surrounding letters. These values correspond to the OpenType values "calt". Two values are possible:
  • contextual Default. Specifies that the contextual alternates are to be used.
  • no-contextual prevents their use.

The bolds are the default.

font-variant-ligatures

Is this difficult to understand?

font-variant-east-asian property

font-variant-east-asian: ruby full-width jis83;

Controls the use of alternate glyphs for East Asian scripts, like Japanese and Chinese

normal | jis78 | jis83 | jis90 | jis04 | simplified 
traditional | full-width | proportional-width | ruby
normal
This keyword leads to the deactivation of the use of such alternate glyphs.
ruby
This keyword forces the use of special glyphs for ruby characters. As these are usually smaller, font creators often designs specific forms, usually slightly bolder to improve the contrast. This keyword corresponds to the OpenType values ruby.
<east-asian-variant-values>
These values specify a set of logographic glyph variants which should be used for display. Possible values are:
Keyword Standard defining the glyphs OpenType equivalent
jis78 JIS X 0208:1978 jp78
jis83 JIS X 0208:1983 jp83
jis90 JIS X 0208:1990 jp90
jis04 JIS X 0213:2004 jp04
simplified None, use the simplified Chinese glyphs smpl
traditional None, use the traditional Chinese glyphs trad
<east-asian-width-values>
These values control the sizing of figures used for East Asian characters. Two values are possible:
  • proportional-width activating the set of East Asian characters which vary in width. OpenType:s pwid.
  • full-width activating the set of East Asian characters which are all of the same, roughly square, width metric. It corresponds to the OpenType values fwid.

font-variant-alternates property

Controls the usage of alternate glyphs. These alternate glyphs may be referenced by alternative names defined in @font-feature-values.

normal | stylistic() | historical-forms | styleset() 
character-variant() | swash() | ornaments() | annotation()
normal
This keyword deactivates alternate glyphs.
historical-forms
This keyword enables historical forms — glyphs that were common in the past but not today. OpenType: "hist".
stylistic()
This function enables stylistic alternates for individual characters. The parameter is a font-specific name mapped to a number. OpenType: "salt".
styleset()
This function enables stylistic alternatives for sets of characters. The parameter is a font-specific name mapped to a number. OpenType: "ssXY", like "ss02".
character-variant()
This function enables specific stylistic alternatives for characters. It is similar to styleset(), but doesn't create coherent glyphs for a set of characters; individual characters will have independent and not necessarily coherent styles. The parameter is a font-specific name mapped to a number. OpenType: "cvXY", like "cv02".
swash()
This function enables swash glyphs. The parameter is a font-specific name mapped to a number. OpenType: "swsh" and "cswh", like swsh 2 and cswh 2.
ornaments()
This function enables ornaments, like fleurons and other dingbat glyphs. The parameter is a font-specific name mapped to a number. OpenType: "ornm", like ornm 2.
annotation()
This function enables annotations, like circled digits or inverted characters. The parameter is a font-specific name mapped to a number. OpenType: "nalt", like nalt 2.

CSS 2 font-variant property

This typeface is not necessarily the variant 'as described'.

Comparison paragraph of text

CSS 2 & 3 font-variant property

This paragraph will change based on the font-variant value.

Comparison paragraph of text

line-height property

line-height property

Sets the height of a line box, or the distance between lines of text.

normal | <number> | <length> | <percentage>
normal
Default, usually 1.2, depending on font-family.
<number>(unitless)
Line Height = value * font size. Use this!
<length>
Uses the length provided as the line height. Not as good as an idea as you would think.
<percentage>
Relative to the font size on the element on which it was declared (not the element's font).

useful to vertically center a single line of text

line-height property

Centered

Vertically

Three Words Here

line-height property

Here is some text over a few lines. The class is the number 1 written out

Here is some text over a few lines. The class is the number 1 written out

Here is some text over a few lines. The class is the number 2 written out

Here is some text over a few lines. The class is the number 2 written out

Here is some text over a few lines. The class is the number 3 written out

Here is some text over a few lines. The class is the number 3 written out

Shorthand font property

font property

Shorthand for font-style, font-variant, font-weight, font-stretch, font-size, line-height, and font-family.

font: italic small-caps bold condensed 1.7rem/1.6 papyrus, serif;
  • it must include values for font-size and font-family
  • it may optionally include values for font-style, font-variant, font-weight, font-stretch, and line-height
  • font-style, font-variant and font-weight must precede font-size
  • font-variant can only be normal or small-caps
  • font-stretch can only be a single keyword value (no percentages).
  • line-height, if included, must immediately follow font-size and be preceded by "/"
  • font-family must be the last value specified.

font shortand

Did the font features described above get applied to this paragraph? Did all of them get applied? What if we stick in an error? not capital.

How forgiving is the shorthand?

System font font declaration

If declared as a single keyword, that keyword can be a system font

caption | icon | menu | message-box | small-caption | status-bar
caption
System font used for captioned controls (e.g., buttons, drop-downs, etc.).
icon
System font used to label icons.
menu
System font used in menus (e.g., dropdown menus and menu lists).
message-box
System font used in dialog boxes.
small-caption
System font used for labeling small controls.
status-bar
System font used in window status bars.

font-size-adjust property

sets how the font size should be chosen based on height of lowercase rather than capital letters

font-size: none | <number>
  • Useful is keeping the layout approximately as expected when first expected font is not available.
  • Adjusts the font-size so the x-height is the same regardless of the font used
font-size: 20px;  
font-size-adjust: 0.5;

Means make the lowercase letters 10px tall

Specifies the aspect value used to calculate the new font size.

Affects the used value of ‘font-size’ (ex, ch) but does not affect the computed value (em).

font-size-adjust property

This paragraph is adjusted

This paragraph for comparison

font-synthesis property

Controls which missing typefaces, bold or italic, may be synthesized by the browser.

font-synthesis: none | weight | style | weight style

Gives you control: Chinese, Japanese, Korean and logographic scripts tend not to include bold or italic variants, and synthesizing them may impede the legibility

  • none: neither bold nor italic typeface may be synthesized.
  • weight: synthesize bold typeface
  • style: synthesize italic typeface
  • weight style: synthesize both

@font-face

@font-face

Enables using custom fonts on the web.

The feature that enables us to not be reliant only on "web-safe" fonts

Caveats

  • CORS: font files must be on the same domain as the page using them
  • Lots of fonts can lead to slow load (limit # of fonts)
  • Lots of characters can lead to large font files (limit character set)
  • Slow load can lead to FOUT (swap)
  • Don't use if you don't need to! (use system fonts)

@font-face at-rule

Specifies a font which can then be used as a font-family value

@font-face {
   font-family: <family-name>; 
src: <src>; 
   unicode-range: <unicode-range>; 
   font-variant: <font-variant>; 
   font-feature-settings: <font-feature-settings>; 
   font-variation-settings: <font-variation-settings>;
   font-stretch: <font-stretch>; 
   font-weight: <font-weight>; 
   font-style: <font-style>; 
}

A value for each font descriptor is set, whether explicitly or to the default value.

@font-face

Start with:

@font-face {
   font-family: 'Name of your font'; 
   src: ;
}

Values for CSS descriptors are same as that of its corresponding font property.

font-family and src descriptors are required.

font-family descriptor

Required value. Specifies the name you will be referencing when you include the font in a font list.

@font-face {
  font-family: My Font Name;
  src: local('font name on my system') url('path/fontFileName.ttf');
}

Doesn't need to be quoted unless there's punctuation or a word starts with a number. Though, quoting makes it easier to read.

font-family descriptor

@font-face {
  font-family: "Cool Font";
  src: local('Times New Roman') url('path/unrelatedName.ttf');
}

The name you give isn't restricted by other values, including names of existing fonts.

Don't use system ui names (see font shorthand)

@font-face {
  font-family: "Times New Roman";
  src: url('path/unrelatedName.ttf');
}

Will use the unrelatedName.ttf instead of the system's Times New Roman.

Font family names are case insensitive.

src descriptor

Specifies the resource containing font data

src: local(Acme Font),
     url(path/to/acme.woff),
     url(path/to/acme.otf), 
     url(path/to/acme.svg);

Use both local() and url()

If the user has the font installed, use that and save time/bytes. If not, download the font file.

  • comma-separated list of font files or locally-installed font face names
  • Using the first it can successfully activate

src descriptor format() hint

Optional hint describing the format of the font resource

src: local(Acme Font),
     url(path/to/acme.woff) format("woff"),
     url(path/to/acme.otf) format("opentype"), 
     url(path/to/acme.svg) format("svg");

Comma-separated list of format strings of well-known font formats.

  • Browsers skip resource if the format is unsupported or unknown
  • If there's no hint, browser downloads then tests (bad performance).

src descriptor local() resource

To use a locally available copies of a given font and download it if it's not, or to rename a OS font, or to overwrite the name of a 3rd party font

@font-face {
  font-family: "Estelle's Fantastic Font";
  src: local(Estelle Bold),                          /* full font name */
       local(Estelle-Bold),                          /* Postscript name */
       url(path/EstelleBoldFnt.woff) format("woff"), /* Download if user */
       url(path/EstelleBoldFnt.otf)  format("otf");  /* doesn't have it. */
  font-weight: bold;
}

specifies a single font, not an entire font family

font-style, font-weight and font-stretch descriptors

font-style, font-weight and font-stretch descriptors

Allows authors to specify the font styles, weights, and stretch for the font specified in the @font-face rule.

@font-face {
  font-family: groovyFont;
  src: url('groovy-oblique.ttf');
  font-style: oblique -30deg 30deg;
  font-weight: 300 500;
  font-stretch: 75% 150%;
}

For every font family, different files can be downloaded for each style, weight, or stretch. The descriptors explicitly specify when this file should be used.

font-style descriptor

auto | normal | italic | oblique [ <angle> | <angle> <angle> ] ?

Use "slnt" variation for oblique OR ital=1 for italic. Not both.

normal
Used for normal version of the font-family. font-style: normal;
italic
Use for italic version of the normal font. font-style: italic;
oblique
Sloped version of the normal font. font-style: oblique;
oblique with angle
Font is set to oblique with a specifie slange angle font-style: oblique -10deg;
oblique <angle> range
Selects a font classified as oblique while specifying a range of allowable angles of text slant. font-style: oblique -30deg 30deg;

Range is only supported when the font-style is oblique; for font-style: normal or italic, no second value is allowed.

font-weight descriptor

auto |normal | bold | <number>{1,2}

There are generally limited weights available for a font family. When specified weight doesn't exist, a nearby weight is used.

Fonts lacking bold are often synthesized by browser. To prevent this, use font-synthesis property.

Use "wght" variation for font-weights

ValueMapping
1 lowest valid value
100 Thin
200 Extra Light (Ultra Light)
300 Light
400 Normal
500 Medium
600 Semi Bold (Demi Bold)
700 Bold
800 Extra Bold (Ultra Bold)
900 Black (Heavy)
1000 highest valid value

Some styles

Class is fwd

font-stretch descriptor

For variable fonts, the "wdth" variation is used to implement varying widths.

Absolute keyword value Numeric value
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%

unicode-range descriptor

Sets the specific range of characters to be used from a font defined by @font-face. Defaults to all characters available.

unicode-range: U+0025-00FF, U+4??;
single codepoint
A single Unicode character unicode-range: U+26
codepoint range
A range of Unicode characters. unicode-range: U+0025-00FF;.
wildcard range
A range of Unicode code points denoted with ?. unicode-range: U+4?? => U+400 to U+4FF.

If the page doesn't use any character in the range, the font is not downloaded

If a single character on a page requires a font, the whole font is downloaded.

Unicode Subset

@font-face {
    font-family: 'myFont';
    src: url('myfont-webfont.woff2') format('woff2'),
         url('myfont-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    unicode-range: U+26;
}

Font Squirrel

Character ranges

All is fair is love & war.

Subsets of Google Fonts

<link  rel="stylesheet" 
href="//fonts.googleapis.com/
css?family=Rye:regular&text=AEIOUaeiou">

But I've never been to the moon! Shut up and get to the point! What are their names? Good news, everyone! There's a report on TV with some very bad news! I'm sure those windmills will keep them cool. This is the worst part. The calm before the battle. I can explain. It's very valuable. You wouldn't. Ask anyway! I daresay that Fry has discovered the smelliest object in the known universe! I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope?

font-feature-settings descriptor

Controls advanced typographic features in OpenType fonts.

Code Meaning
"c2sc"Small Capitals From Capitals
"calt"Contextual Alternates
"case"Case-Sensitive Forms
"dnom"Denominators
"frac"Fractions
"hist" enable historical forms
"liga"Standard Ligatures
"lnum"Lining Figures
"locl"Localized Forms
"numr"Numerators
"onum"Oldstyle Figures
"pnum"Proportional Figures
"sinf"Scientific Inferiors
"smcp"Small Capitals
"ss01"Stylistic Set 1 (Numero correct)
"ss07" Stylistic Set 7
"subs"Subscript
"sups"Superscript
"tnum"Tabular Figures
"zero"Slashed Zero

Use the font-variant shorthand property or an associated longhand property such as font-variant-ligatures, font-variant-caps, font-variant-east-asian, font-variant-alternates, font-variant-numeric or font-variant-position.

  • Must be 4 characters.
  • <string>, not an <ident>

font-feature-settings

Lashana Lynch as 007 will be fantastic!.

font-feature-settings

 {
   font-feature-settings: 
        "c2sc", "calt", "case", "dnom", "frac", "liga", "lnum", 
        "locl", "numr", "onum", "pnum", "sinf", "smcp", "ss01", 
        "ss07", "subs", "sups", "tnum", "zero";
}

Font Notes

  1. Loading: Font files can have huge files sizes. Redue the number of fonts and the charset for each
  2. Legal ownership: Putting a font on the web makes it available for people to download freely. You need the right type of ownership to do this legally
  3. Performance: Due to the size, they can take a long time to load. FOUT and FOIC
    • Flash of Unstyled Text: display fallback until custom font loads
    • Flash of Invisible Text: Hides the text until custom font loaded
  4. Don't forget font-synthesis: none;

Font Notes

If a font family match occurs, the user agent assembles the set of font faces in that family and then narrows the set to a single face using other font properties in the order given below. A group of faces defined via @font-face rules with identical font descriptor values but differing ‘unicode-range’ values are considered to be a single composite face for this step:
  1. ‘font-stretch’ is tried first. If the matching set contains faces with width values matching the ‘font-stretch’ value, faces with other width values are removed from the matching set. If there is no face that exactly matches the width value the nearest width is used instead. If the value of ‘font-stretch’ is ‘normal’ or one of the condensed values, narrower width values are checked first, then wider values. If the value of ‘font-stretch’ is one of the expanded values, wider values are checked first, followed by narrower values. Once the closest matching width has been determined by this process, faces with other widths are removed from the matching set.
  2. ‘font-style’ is tried next. If the value of ‘font-style’ is ‘italic’, italic faces are checked first, then oblique, then normal faces. If the value is ‘oblique’, oblique faces are checked first, then italic faces and then normal faces. If the value is ‘normal’, normal faces are checked first, then oblique faces, then italic faces. Faces with other style values are excluded from the matching set. User agents are permitted to distinguish between italic and oblique faces within platform font families but this is not required, so all italic or oblique faces may be treated as italic faces. However, within font families defined via @font-face rules, italic and oblique faces must be distinguished using the value of the ‘font-style’ descriptor. For families that lack any italic or oblique faces, user agents may create artificial oblique faces, if this is permitted by the value of the ‘font-synthesis’ property.
  3. ‘font-weight’ is matched next, so it will always reduce the matching set to a single font face. If bolder/lighter relative weights are used, the effective weight is calculated based on the inherited weight value, as described in the definition of the ‘font-weight’ property. Given the desired weight and the weights of faces in the matching set after the steps above, if the desired weight is available that face matches. Otherwise, a weight is chosen using the rules below:
    1. If the desired weight is less than 400, weights below the desired weight are checked in descending order followed by weights above the desired weight in ascending order until a match is found.
    2. If the desired weight is greater than 500, weights above the desired weight are checked in ascending order followed by weights below the desired weight in descending order until a match is found.
    3. If the desired weight is 400, 500 is checked first and then the rule for desired weights less than 400 is used. If the desired weight is 500, 400 is checked first and then the rule for desired weights less than 400 is used.
  4. ‘font-size’ must be matched within a UA-dependent margin of tolerance. (Typically, sizes for scalable fonts are rounded to the nearest whole pixel, while the tolerance for bitmapped fonts could be as large as 20%.) Further computations, e.g., by ‘em’ values in other properties, are based on the ‘font-size’ value that is used, not the one that is specified.

How many font files do you need?

Lashana Lynch as 007 will be fantastic!.

  • try bold, italic and normal
  • try font-synthesis: none, weight and style
  • Try each combo for all the fonts

Developer Tools

The developer tools for fonts are AWESOME!

  • See the applied font (used for rendering) in rules view (it's underlined)
  • Discover the Fonts Panel
  • See a list of all used fonts used in a document
  • on hover of the font family, highlight where the font is used to render content (this is great for showing subsets) editor area, works for both non-varialbe and variable fonts (will show all custom axis) editor can convert units if you switch them at the bottom, list of all fonts used on page incl. hover functionality mentioned above

font-display descriptor

how a font face is displayed based on whether and when it is downloaded and ready to use

font-display: auto | block | swap | fallback | optional
auto
The font display strategy is defined by the user agent.
block
Gives the font face a short block period and an infinite swap period.
swap
Gives the font face an extremely small block period and an infinite swap period.
fallback
Gives the font face an extremely small block period and a short swap period.
optional
Gives the font face an extremely small block period and no swap period.

font-display timeline

The font display timeline

The font display timeline is based on a timer that begins the moment the user agent attempts to use a given downloaded font face. The timeline is divided into the three periods below which dictate the rendering behavior of any elements using the font face.

Font block period
If the font face is not loaded, any element attempting to use it must render an invisible fallback font face. If the font face successfully loads during this period, it is used normally.
Font swap period
If the font face is not loaded, any element attempting to use it must render a fallback font face. If the font face successfully loads during this period, it is used normally.
Font failure period
If the font face is not loaded, the user agent treats it as a failed load causing normal font fallback.

font-display implementation

If you know the font is going to take a while to load or has a very different look than the fallback

@font-face {
  font-family: MyLargeFont;
  src: url(/path/to/fonts/hugeFontFile.woff) format('woff');
  font-display: fallback;
}

If you know the fallback isn't too shockingly different from the custom font.

@font-face {
  font-family: MyRequiredFont;
  src: url(/path/to/fonts/hugeFontFile.woff) format('woff');
  font-display: swap;
}

Icon Fonts

Icon Fonts

Use SVG

with CurrentColor

Material Design Icons

3d_rotation ac_unit access_alarm access_alarms access_time accessibility accessible account_balance account_balance_wallet account_box account_circle adb add add_a_photo add_alarm add_alert add_box add_circle add_circle_outline add_location add_shopping_cart add_to_photos add_to_queue adjust airline_seat_flat airline_seat_flat_angled airline_seat_individual_suite airline_seat_legroom_extra airline_seat_legroom_normal airline_seat_legroom_reduced airline_seat_recline_extra airline_seat_recline_normal airplanemode_active airplanemode_inactive airplay airport_shuttle alarm alarm_add alarm_off alarm_on album all_inclusive all_out android announcement apps archive arrow_back arrow_downward arrow_drop_down arrow_drop_down_circle arrow_drop_up arrow_forward arrow_upward art_track aspect_ratio assessment assignment assignment_ind assignment_late assignment_return assignment_returned assignment_turned_in assistant assistant_photo attach_file attach_money attachment audiotrack autorenew av_timer backspace backup battery_alert battery_charging_full battery_full battery_std battery_unknown beach_access beenhere block bluetooth bluetooth_audio bluetooth_connected bluetooth_disabled bluetooth_searching blur_circular blur_linear blur_off blur_on book bookmark bookmark_border border_all border_bottom border_clear border_color border_horizontal border_inner border_left border_outer border_right border_style border_top border_vertical branding_watermark brightness_1 brightness_2 brightness_3 brightness_4 brightness_5 brightness_6 brightness_7 brightness_auto brightness_high brightness_low brightness_medium broken_image brush bubble_chart bug_report build burst_mode business business_center cached cake call call_end call_made call_merge call_missed call_missed_outgoing call_received call_split call_to_action camera camera_alt camera_enhance camera_front camera_rear camera_roll cancel card_giftcard card_membership card_travel casino cast cast_connected center_focus_strong center_focus_weak change_history chat chat_bubble chat_bubble_outline check check_box check_box_outline_blank check_circle chevron_left chevron_right child_care child_friendly chrome_reader_mode class clear clear_all close closed_caption cloud cloud_circle cloud_done cloud_download cloud_off cloud_queue cloud_upload code collections collections_bookmark color_lens colorize comment compare compare_arrows computer confirmation_number contact_mail contact_phone contacts content_copy content_cut content_paste control_point control_point_duplicate copyright create create_new_folder credit_card crop crop_16_9 crop_3_2 crop_5_4 crop_7_5 crop_din crop_free crop_landscape crop_original crop_portrait crop_rotate crop_square dashboard data_usage date_range dehaze delete delete_forever delete_sweep description desktop_mac desktop_windows details developer_board developer_mode device_hub devices devices_other dialer_sip dialpad directions directions_bike directions_boat directions_bus directions_car directions_railway directions_run directions_subway directions_transit directions_walk disc_full dns do_not_disturb do_not_disturb_alt do_not_disturb_off do_not_disturb_on dock domain done done_all donut_large donut_small drafts drag_handle drive_eta dvr edit edit_location eject email enhanced_encryption equalizer error error_outline euro_symbol ev_station event event_available event_busy event_note event_seat exit_to_app expand_less expand_more explicit explore exposure exposure_neg_1 exposure_neg_2 exposure_plus_1 exposure_plus_2 exposure_zero extension face fast_forward fast_rewind favorite favorite_border featured_play_list featured_video feedback fiber_dvr fiber_manual_record fiber_new fiber_pin fiber_smart_record file_download file_upload filter filter_1 filter_2 filter_3 filter_4 filter_5 filter_6 filter_7 filter_8 filter_9 filter_9_plus filter_b_and_w filter_center_focus filter_drama filter_frames filter_hdr filter_list filter_none filter_tilt_shift filter_vintage find_in_page find_replace fingerprint first_page fitness_center flag flare flash_auto flash_off flash_on flight flight_land flight_takeoff flip flip_to_back flip_to_front folder folder_open folder_shared folder_special font_download format_align_center format_align_justify format_align_left format_align_right format_bold format_clear format_color_fill format_color_reset format_color_text format_indent_decrease format_indent_increase format_italic format_line_spacing format_list_bulleted format_list_numbered format_paint format_quote format_shapes format_size format_strikethrough format_textdirection_l_to_r format_textdirection_r_to_l format_underlined forum forward forward_10 forward_30 forward_5 free_breakfast fullscreen fullscreen_exit functions g_translate gamepad games gavel gesture get_app gif golf_course gps_fixed gps_not_fixed gps_off grade gradient grain graphic_eq grid_off grid_on group group_add group_work hd hdr_off hdr_on hdr_strong hdr_weak headset headset_mic healing hearing help help_outline high_quality highlight highlight_off history home hot_tub hotel hourglass_empty hourglass_full http https image image_aspect_ratio import_contacts import_export important_devices inbox indeterminate_check_box info info_outline input insert_chart insert_comment insert_drive_file insert_emoticon insert_invitation insert_link insert_photo invert_colors invert_colors_off iso keyboard keyboard_arrow_down keyboard_arrow_left keyboard_arrow_right keyboard_arrow_up keyboard_backspace keyboard_capslock keyboard_hide keyboard_return keyboard_tab keyboard_voice kitchen label label_outline landscape language laptop laptop_chromebook laptop_mac laptop_windows last_page launch layers layers_clear leak_add leak_remove lens library_add library_books library_music lightbulb_outline line_style line_weight linear_scale link linked_camera list live_help live_tv local_activity local_airport local_atm local_bar local_cafe local_car_wash local_convenience_store local_dining local_drink local_florist local_gas_station local_grocery_store local_hospital local_hotel local_laundry_service local_library local_mall local_movies local_offer local_parking local_pharmacy local_phone local_pizza local_play local_post_office local_printshop local_see local_shipping local_taxi location_city location_disabled location_off location_on location_searching lock lock_open lock_outline looks looks_3 looks_4 looks_5 looks_6 looks_one looks_two loop loupe low_priority loyalty mail mail_outline map markunread markunread_mailbox memory menu merge_type message mic mic_none mic_off mms mode_comment mode_edit monetization_on money_off monochrome_photos mood mood_bad more more_horiz more_vert motorcycle mouse move_to_inbox movie movie_creation movie_filter multiline_chart music_note music_video my_location nature nature_people navigate_before navigate_next navigation near_me network_cell network_check network_locked network_wifi new_releases next_week nfc no_encryption no_sim not_interested note note_add notifications notifications_active notifications_none notifications_off notifications_paused offline_pin ondemand_video opacity open_in_browser open_in_new open_with pages pageview palette pan_tool panorama panorama_fish_eye panorama_horizontal panorama_vertical panorama_wide_angle party_mode pause pause_circle_filled pause_circle_outline payment people people_outline perm_camera_mic perm_contact_calendar perm_data_setting perm_device_information perm_identity perm_media perm_phone_msg perm_scan_wifi person person_add person_outline person_pin person_pin_circle personal_video pets phone phone_android phone_bluetooth_speaker phone_forwarded phone_in_talk phone_iphone phone_locked phone_missed phone_paused phonelink phonelink_erase phonelink_lock phonelink_off phonelink_ring phonelink_setup photo photo_album photo_camera photo_filter photo_library photo_size_select_actual photo_size_select_large photo_size_select_small picture_as_pdf picture_in_picture picture_in_picture_alt pie_chart pie_chart_outlined pin_drop place play_arrow play_circle_filled play_circle_outline play_for_work playlist_add playlist_add_check playlist_play plus_one poll polymer pool portable_wifi_off portrait power power_input power_settings_new pregnant_woman present_to_all print priority_high public publish query_builder question_answer queue queue_music queue_play_next radio radio_button_checked radio_button_unchecked rate_review receipt recent_actors record_voice_over redeem redo refresh remove remove_circle remove_circle_outline remove_from_queue remove_red_eye remove_shopping_cart reorder repeat repeat_one replay replay_10 replay_30 replay_5 reply reply_all report report_problem restaurant restaurant_menu restore restore_page ring_volume room room_service rotate_90_degrees_ccw rotate_left rotate_right rounded_corner router rowing rss_feed rv_hookup satellite save scanner schedule school screen_lock_landscape screen_lock_portrait screen_lock_rotation screen_rotation screen_share sd_card sd_storage search security select_all send sentiment_dissatisfied sentiment_neutral sentiment_satisfied sentiment_very_dissatisfied sentiment_very_satisfied settings settings_applications settings_backup_restore settings_bluetooth settings_brightness settings_cell settings_ethernet settings_input_antenna settings_input_component settings_input_composite settings_input_hdmi settings_input_svideo settings_overscan settings_phone settings_power settings_remote settings_system_daydream settings_voice share shop shop_two shopping_basket shopping_cart short_text show_chart shuffle signal_cellular_4_bar signal_cellular_connected_no_internet_4_bar signal_cellular_no_sim signal_cellular_null signal_cellular_off signal_wifi_4_bar signal_wifi_4_bar_lock signal_wifi_off sim_card sim_card_alert skip_next skip_previous slideshow slow_motion_video smartphone smoke_free smoking_rooms sms sms_failed snooze sort sort_by_alpha spa space_bar speaker speaker_group speaker_notes speaker_notes_off speaker_phone spellcheck star star_border star_half stars stay_current_landscape stay_current_portrait stay_primary_landscape stay_primary_portrait stop stop_screen_share storage store store_mall_directory straighten streetview strikethrough_s style subdirectory_arrow_left subdirectory_arrow_right subject subscriptions subtitles subway supervisor_account surround_sound swap_calls swap_horiz swap_vert swap_vertical_circle switch_camera switch_video sync sync_disabled sync_problem system_update system_update_alt tab tab_unselected tablet tablet_android tablet_mac tag_faces tap_and_play terrain text_fields text_format textsms texture theaters thumb_down thumb_up thumbs_up_down time_to_leave timelapse timeline timer timer_10 timer_3 timer_off title toc today toll tonality touch_app toys track_changes traffic train tram transfer_within_a_station transform translate trending_down trending_flat trending_up tune turned_in turned_in_not tv unarchive undo unfold_less unfold_more update usb verified_user vertical_align_bottom vertical_align_center vertical_align_top vibration video_call video_label video_library videocam videocam_off videogame_asset view_agenda view_array view_carousel view_column view_comfy view_compact view_day view_headline view_list view_module view_quilt view_stream view_week vignette visibility visibility_off voice_chat voicemail volume_down volume_mute volume_off volume_up vpn_key vpn_lock wallpaper warning watch watch_later wb_auto wb_cloudy wb_incandescent wb_iridescent wb_sunny wc web web_asset weekend whatshot widgets wifi wifi_lock wifi_tethering work wrap_text youtube_searched_for zoom_in zoom_out zoom_out_map

Variable Fonts

Variable Fonts

Fonts that have many different variations - bold, italic, oblique, condensed, expanded, glyphs - of a typeface in a single file, rather than having a separate font file for every width, weight, or style.

  • Only one HTTP requests
  • Larger than a single font, but smaller than 2 versions (bold & regular)
  • (Almost) Infinite options

font-variation-settings property

Specify 4-letter axis names and values of the characteristics you want to vary

Axis Tag CSS Property
"wght" font-weight
"wdth" font-stretch
"slnt" (slant) font-style: oblique + angle
"ital" font-style: italic
"opsz"

font-optical-sizing

c2scSmall Capitals From Capitals

font-variation-settings property

Font weight is set with font-variation-settings value.

Comparison paragraph of text

font-variation-settings property

This paragraph will change based on the font-variant value.

Comparison paragraph of text

Variable Fonts

axis-praxis.org

Font Style Matcher

meowni.ca

More....

font-kerning property

font-kerning: auto | normal | none;

font-variant-ligatures property

normal | none | (no-)contextual | (no-)common-ligatures | 
 (no-)discretionary-ligatures | (no-)historical-ligatures;

font-variant-caps property

normal | small-caps | all-small-caps | petite-caps |
all-petite-caps | unicase | titling-caps

font-variant-numeric property: either normal or one or more of the other space-separated values

normal | ordinal | slashed-zero | lining-nums | oldstyle-nums | proportional-nums | tabular-nums | diagonal-fractions | stacked-fractions

font-variant-alternatives property

font-variant-emoji property

Text

Next ➹

Table of Content

  1. Introduction
  2. Selectors
  3. Specificity
  4. Generated Content
  5. Media Queries
  6. Units & Values
  7. Colors & Transparency
  8. Math & Variables
  9. Fonts
  10. Text
  11. Images
  12. Backgrounds
  13. Gradients
  14. Box Model
  15. Flexbox
  16. Tables
  17. Grids
  18. Transforms
  19. Transitions & Animation
  20. Other Features

Links