WebFont Proxima Nova

The Proxima Nova font suite is available for official use by University of Arizona employees through a license with Adobe.

How to Use

The Proxima Nova font suite is available for official use by University of Arizona employees through a license with Adobe Typekit.

Arizona Bootstrap uses an Adobe Typekit account with shared governance to manage our font reference links within Arizona Bootstrap.

Put this within your <head> tag above the reference to Arizona Bootstrap.

<!-- Proxima Nova reference. -->
<link href="https://use.typekit.net/emv3zbo.css" rel="stylesheet" crossorigin="anonymous">
<!-- Arizona Bootstrap reference. -->
<link rel="stylesheet" href="https://cdn.digital.arizona.edu/lib/arizona-bootstrap/2.0.27/css/arizona-bootstrap.min.css" crossorigin="anonymous">

Centrally managed Typekit webfont

For ease of integration into web projects around campus, the Arizona Digital team manages a Typekit webfont project that can be referenced by your site.

Notes to consider when using the centrally managed webfont project.

Our license with Typekit allows anyone with a NetID to create their own webfont project in Creative Cloud Typekit and use it in all of their web projects.

Managing your own project

Advantages

  • You can tailor your font project to only include the fonts that your web site or app uses, minimizing the number of assets an end-user has to download.
  • Faster page load if your site uses a smaller subset of font variants than what are included in the shared library.

Disadvantages

  • You have to manage your own font in Typekit using a NetID.
    • If the NetID is tied to one person, it creates a single point of failure if that user leaves the University.
    • If the NetID is a shared “test NetID” you have to manage credentials, and sign it up to use Adobe products.

Note If you choose to manage your own web font project, it is strongly recommended that you go through the effort to use a test NetID, which is shared with your department. Note Our license agreement with Adobe does not allow us to self-host font files.

Global settings

Follow these instructions on how to add Proxima Nova to your website.

Native Fallback Fonts

The fallback webfont for Arizona Bootstrap is Calibri. Additional fallbacks follow Bootstrap 4’s use of “native font stack” for optimum text rendering on every device and OS. Read more about native font stacks in this Smashing Magazine article.

  $font-family-sans-serif:
  proxima-nova,
  calibri,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // Basic web fallback
  "Helvetica Neue", Arial, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

This font-family is applied to the <body> and automatically inherited globally throughout Bootstrap. To switch the global font-family, update $font-family-base and recompile Arizona Bootstrap.

Instructions

The following istructions are for adding specific CSS classes for font weights or styles. If using Arizona Bootstrap, you will most likely not need to do this unless you are trying to use a specific variant. Important

Proxima Nova Bold

.proxima-nova-bold {
font-family: proxima-nova, sans-serif;
font-weight: 700;
font-style: normal;
}
abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^& 
<div class="proxima-nova-bold">
  <span class="text-uppercase">abcdefghijklmnopqrstuvwxyz</span>
  <span>abcdefghijklmnopqrstuvwxyz</span> <br />
  <span>0123456789</span> <br />
  <span>!@#$%^&</span>
</div>

Proxima Nova Bold Italic

.proxima-nova-bold-italic {
font-family: proxima-nova, sans-serif;
font-weight: 700;
font-style: italic;
}
abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^& 
<div class="proxima-nova-bold-italic">
  <span class="text-uppercase">abcdefghijklmnopqrstuvwxyz</span>
  <span>abcdefghijklmnopqrstuvwxyz</span> <br />
  <span>0123456789</span> <br />
  <span>!@#$%^&</span>
</div>

Proxima Nova Regular

.proxima-nova {
font-family: proxima-nova, sans-serif;
font-weight: 400;
font-style: normal;
}
abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^& 
<div class="proxima-nova">
 <span class="text-uppercase">abcdefghijklmnopqrstuvwxyz</span>
 <span>abcdefghijklmnopqrstuvwxyz</span> <br />
 <span>0123456789</span> <br />
 <span>!@#$%^&</span>
</div>

Proxima Nova Italic

.proxima-nova-italic {
font-family: proxima-nova, sans-serif;
font-weight: 400;
font-style: italic;
}
abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^& 
<div class="proxima-nova-italic">
  <span class="text-uppercase">abcdefghijklmnopqrstuvwxyz</span>
  <span>abcdefghijklmnopqrstuvwxyz</span> <br />
  <span>0123456789</span> <br />
  <span>!@#$%^&</span>
</div>

Proxima Nova Extra Condensed Bold Italic

.proxima-nova-ec-bold-italic {
font-family: proxima-nova-extra-condensed, sans-serif;
font-weight: 700;
font-style: italic;
}
abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^& 
<div class="proxima-nova-ec-bold-italic">
  <span class="text-uppercase">abcdefghijklmnopqrstuvwxyz</span>
  <span>abcdefghijklmnopqrstuvwxyz</span> <br />
  <span>0123456789</span> <br />
  <span>!@#$%^&</span>
</div>

Proxima Nova Extra Condensed Bold

.proxima-nova-ec-bold {
font-family: proxima-nova-extra-condensed, sans-serif;
font-weight: 700;
font-style: normal;
}
abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^& 
<div class="proxima-nova-ec-bold">
  <span class="text-uppercase">abcdefghijklmnopqrstuvwxyz</span>
  <span>abcdefghijklmnopqrstuvwxyz</span> <br />
  <span>0123456789</span> <br />
  <span>!@#$%^&</span>
</div>

Proxima Nova Extra Condensed Italic

.proxima-nova-ec-italic {
font-family: proxima-nova, sans-serif;
font-weight: 400;
font-style: italic;
}
abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^& 
<div class="proxima-nova-ec-italic">
  <span class="text-uppercase">abcdefghijklmnopqrstuvwxyz</span>
  <span>abcdefghijklmnopqrstuvwxyz</span> <br />
  <span>0123456789</span> <br />
  <span>!@#$%^&</span>
</div>

Proxima Nova Extra Condensed Regular

.proxima-nova-ec {
font-family: proxima-nova-extra-condensed, sans-serif;
font-weight: 400;
font-style: normal;
}
abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^& 
<div class="proxima-nova-ec">
  <span class="text-uppercase">abcdefghijklmnopqrstuvwxyz</span>
  <span>abcdefghijklmnopqrstuvwxyz</span> <br />
  <span>0123456789</span> <br />
  <span>!@#$%^&</span>
</div>

Proxima Nova Condensed Bold

.proxima-nova-c-bold {
font-family: proxima-nova-condensed, sans-serif;
font-weight: 700;
font-style: normal;
}
abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^& 
<div class="proxima-nova-c-bold">
  <span class="text-uppercase">abcdefghijklmnopqrstuvwxyz</span>
  <span>abcdefghijklmnopqrstuvwxyz</span> <br />
  <span>0123456789</span> <br />
  <span>!@#$%^&</span>
</div>

Proxima Nova Condensed Bold Italic

.proxima-nova-c-bold-italic {
font-family: proxima-nova-condensed, sans-serif;
font-weight: 700;
font-style: italic;
}
abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^& 
<div class="proxima-nova-c-bold-italic">
  <span class="text-uppercase">abcdefghijklmnopqrstuvwxyz</span>
  <span>abcdefghijklmnopqrstuvwxyz</span> <br />
  <span>0123456789</span> <br />
  <span>!@#$%^&</span>
</div>

Proxima Nova Condensed Regular

.proxima-nova-c {
font-family: proxima-nova-condensed, sans-serif;
font-weight: 400;
font-style: normal;
}
abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^& 
<div class="proxima-nova-c">
  <span class="text-uppercase">abcdefghijklmnopqrstuvwxyz</span>
  <span>abcdefghijklmnopqrstuvwxyz</span> <br />
  <span>0123456789</span> <br />
  <span>!@#$%^&</span>
</div>

Proxima Nova Condensed Italic

.proxima-nova-c-italic {
font-family: proxima-nova, sans-serif;
font-weight: 400;
font-style: italic;
}
abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^& 
<div class="proxima-nova-c-italic">
  <span class="text-uppercase">abcdefghijklmnopqrstuvwxyz</span>
  <span>abcdefghijklmnopqrstuvwxyz</span> <br />
  <span>0123456789</span> <br />
  <span>!@#$%^&</span>
</div>

Examples in CSS

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

Example 1

Hello World!

Hello World!
Hello World!
Hello World! 
  <h2 class="pn">Hello World!</h2>
  <div class="pn">
    <em>Hello World!</em>
  </div>
  <div class="pn">
    <strong>Hello World!</strong>
  </div>
  <div class="pn">
    <strong><em>Hello World!</em></strong>
  </div>
.pn {
font-family: proxima-nova-condensed, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
// Not strictly necessary, since Arizona Bootstrap already sets <em> to italic.
.pn em {
font-style: italic;
}
// Not strictly necessary, since Arizona Bootstrap already sets <strong> to
bolder.
.pn strong {
font-weight:700;
}

Hello World!

Hello World!
Hello World!
Hello World! 
<h2 class="pn">Hello World!</h2>
<div>
  <em class="pn">Hello World!</em>
</div>
<div>
  <strong class="pn">Hello World!</strong>
</div>
<div>
  <strong class="pn"><em>Hello World!</em></strong>
</div>

Example 2

p { font-family: proxima-nova-condensed, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }

Hello World!

<p>Hello World!</p>