CSS System Fonts

This is just my note to copy and paste CSS snippets that use system fonts¹.

Humanist

CSS

.humanist-example {
  font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
  font-weight: normal;
}

Example

Add salt before you fry the egg. Be sure to set the lamp firmly in the hole. Beat the dust from the rug onto the lawn. Breathe deep and smell the piny air.

Transitional

CSS

.transitional-example {
  font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
  font-weight: normal;
}

Example

Help the weak to preserve their strength. Hoist it up and take it away. Hold the hammer near the end to drive the nail. Hurdle the pit with the aid of a long pole.

Monospace Code

CSS

.monospace-code-example {
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  font-weight: normal;
}

Example

Send the stuff in a thick paper bag. Set the piece here and say nothing. Shut the hatch before the waves push it in. Slide the catch back and open the desk.

Handwritten

CSS

.handwritten-example {
  font-family: 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive;
  font-weight: normal;
}

Example

Split the log with a quick, sharp blow. Tack the strip of carpet to the worn floor. Take the match and strike it against your shoe. Take the winding path to reach the lake.

-- end of line --

References

Modern Font Stacks

This is the source of the styles. They have some more categories as well that are worth checking out.

Footnotes

1 ⤴

That is, fonts that are installed on systems by default and don't require extra downloads. The fonts vary from system to system. These collections include comparable fonts across them to have a relatively consistent experience.