Fonts

Fonts that have been approved for use as part of the UI Brand Guide are available to use with this service. Fonts can also be dynamically loaded through CSS.
The following UI brand fonts are available as system fonts:
Antonio
Roboto Thin
Roboto
Roboto Medium
Roboto Bold
Roboto Black
Roboto Condensed
Zilla Slab
Lora
The follow style sheet demonstrates the styles for the approved fonts using the available system fonts.
css
.antonio-light {
    font-family: "Antonio", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

.antonio-regular {
    font-family: "Antonio", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.antonio-bold {
    font-family: "Antonio", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.roboto-thin {
    font-family: "Roboto Thin", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
}

.roboto-thin-italic {
    font-family: "Roboto Thin", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: italic;
}

.roboto-light {
    font-family: "Roboto Light", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

.roboto-light-italic {
    font-family: "Roboto Light", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: italic;
}

.roboto-regular {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.roboto-regular-italic {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: italic;
}

.roboto-medium {
    font-family: "Roboto Medium", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.roboto-medium-italic {
    font-family: "Roboto Medium", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: italic;
}

.roboto-bold {
    font-family: "Roboto Bold", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.roboto-bold-italic {
    font-family: "Roboto Bold", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: italic;
}

.roboto-black {
    font-family: "Roboto Black", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
}

.roboto-cond-light {
    font-family: "Roboto Condensed", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

.roboto-cond-regular {
    font-family: "Roboto Condensed", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.roboto-cond-bold {
    font-family: "Roboto Condensed", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.zilla-slab-light {
    font-family: "Zilla Slab", serif;
    font-weight: 300;
    font-style: normal;
}

.zilla-slab-regular {
    font-family: "Zilla Slab", serif;
    font-weight: 400;
    font-style: normal;
}

.zilla-slab-medium {
    font-family: "Zilla Slab", serif;
    font-weight: 500;
    font-style: normal;
}

.zilla-slab-semibold {
    font-family: "Zilla Slab", serif;
    font-weight: 600;
    font-style: normal;
}

.zilla-slab-bold {
    font-family: "Zilla Slab", serif;
    font-weight: 700;
    font-style: normal;
}

.zilla-slab-light-italic {
    font-family: "Zilla Slab", serif;
    font-weight: 300;
    font-style: italic;
}

.zilla-slab-regular-italic {
    font-family: "Zilla Slab", serif;
    font-weight: 400;
    font-style: italic;
}

.zilla-slab-medium-italic {
    font-family: "Zilla Slab", serif;
    font-weight: 500;
    font-style: italic;
}

.zilla-slab-semibold-italic {
    font-family: "Zilla Slab", serif;
    font-weight: 600;
    font-style: italic;
}

.zilla-slab-bold-italic {
    font-family: "Zilla Slab", serif;
    font-weight: 700;
    font-style: italic;
}

.lora-regular {
    font-family: "Lora", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.lora-regular-italic {
    font-family: "Lora", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: italic;
}

.lora-bold {
    font-family: "Lora", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.lora-bold-italic {
    font-family: "Lora", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: italic;
}
Fonts ​

Fonts
