logo

Air CSS ver. 2.3.2

Font family

There are three defined classes that utilize attractive system fonts with appropriate fallbacks for setting the typeface of a page or element. It is suggested that you customize or extend this module to suit your own needs. However, relying on systems fonts greatly improves page performance and can also help your web application/site blend in with the user's operating system.

Mnemonics

Bases
Modifiers
Optional extensions
code
serif
sans-serif

none
none

Examples

<h1 class="code">The quick brown fox ...<h1>

The quick brown fox jumps over the lazy dog. 

<h1 class="serif">The quick brown fox ...<h1>

The quick brown fox jumps over the lazy dog. 

<h1 class="sans-serif">The quick brown fox ...<h1>

The quick brown fox jumps over the lazy dog.

Source code

code, .code {
  font-family: SFMono-Regular,
               Menlo,
               Monaco,
               Consolas,
               "Liberation Mono",
               "Courier New",
               monospace;
}

.serif {
  font-family: georgia,
               times,
               serif;
}

.sans-serif {
  font-family: system-ui,
               -apple-system,
               Segoe UI,
               Roboto,
               Ubuntu,
               Cantarell,
               Noto Sans,
               sans-serif,
               BlinkMacSystemFont,
               "Segoe UI",
               Helvetica,
               Arial,
               sans-serif,
               "Apple Color Emoji",
               "Segoe UI Emoji",
               "Segoe UI Symbol";
}