Fonts

The following fonts are available:

• Montserrat
• Source Sans
• Georgia (relies on client fonts)

For additional information on font usage and pairing, see the Typography page at the Brand Standards website

Using font variables

The brand stylesheet includes the available font files and defines several CSS variables. To use the brand stylesheet on a web page, add the following line:

<link rel="stylesheet" href="https://cdn.brand.illinois.edu/illinois.css">

The following variables are available for styling general page content:

• --il-font-heading
• --il-font-sans
• --il-font-serif

h1 {
  font-size: 2em;
  font-weight: bold;
  font-family: var(--il-font-heading);
}
p {
  font-size: 1em;
  font-family: var(--il-font-sans);
}
blockquote {
  font-family: var(--il-font-serif);
}

Specific fonts can be referenced using the following variables:

• --il-font-montserrat
• --il-font-source-sans
• --il-font-georgia

h1 {
  font-size: 2em;
  font-weight: bold;
  font-family: var(--il-font-montserrat);
}
p {
  font-size: 1em;
  font-family: var(--il-font-source-sans);
}
blockquote {
  font-family: var(--il-font-georgia);
}