How to Use

The Milo font suite is available for official use by UA employees through a license with FontShop. Please follow the instructions below to ensure compliance with the license.

Instructions

Before using the Milo font suite, please complete the font license agreement Important

For projects not using UA Bootstrap, follow these instructions on how to add Milo to your website. Be aware that UA Bootstrap reference links come "pre-loaded" with the Milo font suite. In other words, if you're using UA Bootstrap, font installation instructions are not required.Important

Fallback Fonts

Not all web browsers know about web fonts, and thus we must include consistent fallback typefaces so that your visitor see the same font families when they visit UA sites. Below is the official font stack for both Milo Sans and Milo Serif.

Serif

font-family: MiloSerifWeb, TimesNewRoman, "Times New Roman", Times, Baskerville,
Georgia, serif;

Milo Sans Serif

font-family: MiloWeb, Verdana, Geneva, sans-serif;

Examples in CSS

Below are two examples of how you would use the Milo fonts in your code.

Example 1

h2 {
  font-family: MiloSerifWeb, TimesNewRoman, "Times New Roman", Times,
  Baskerville, Georgia, serif;
}

<h2 class="msw">Hello World!</h2>

Example 2

p { font-family: MiloWeb, Verdana, Geneva, sans-serif; }

<p>Hello World!</p>

Milo Serif Web

<button class="js-specimen-modal-trigger pull-right btn btn-red" data-font-class='milo-serif-web-text-normal' data-font-name='Milo Serif Web' data-target='.bs-example-modal-lg' data-toggle='modal', type='button'>View Sample

Serif Normal

Example

abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^& 
.serif-normal {
  font-family: MiloSerifWeb, TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif;
  font-style: normal;
  font-weight: normal;
}

Serif Medium

Example

abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^& 
.serif-medium {
  font-family: MiloSerifWeb, TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif;
  font-style: normal;
  font-weight: 700;
}

Milo Serif Black

Serif Normal Black

Example

abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^&

The font family changes to MiloSerifWeb-Black Notice

.serif-normal-black {
  font-family: MiloSerifWeb-Black, TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif;
  font-style: normal;
  font-weight: 900;
}

<span class="serif-normal-black">
    ...
</span>

Serif Normal Black Italic

Example

abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^& 
.serif-normal-black-italic {
  font-family: MiloSerifWeb-Black, TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif;
  font-style: normal;
  font-weight:normal;
  font-style: italic;
}

<span class="serif-normal-black-italic">
    ...
</span>

Milo Web

Normal

Example

abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^& 
span {
  font-family: MiloWeb, Verdana, Geneva, sans-serif;
  font-style: normal;
  font-weight: normal;
}

Medium

Example

abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^& 
.medium {
  font-family: MiloWeb, Verdana, Geneva, sans-serif;
  font-style: normal;
  font-weight: 500;
}

Italics

Example

abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^& 
em {
  font-family: MiloWeb, Verdana, Geneva, sans-serif;
  font-style: italic;
  font-weight: normal;
}

Bold

Example

abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^& 
strong {
    font-family: MiloWeb, Verdana, Geneva, sans-serif;
    font-style: normal;
    font-weight:bold;
}