Effective October 2024, we will retire Avenir as our primary web typeface. In its place, we will adopt Nunito Sans, a Google font, specifically for web usage. Please note that Avenir will remain our primary typeface for print and other communications.

Are you currently using Avenir on your websites? Here’s how to switch to Nunito Sans.

Our families of web fonts are available for use on any ucsb.edu sub-domain (ex: subdomain.ucsb.edu). Utilizing them will create more consistency and familiarity as users navigate across UC Santa Barbara websites. The web fonts are centrally hosted and can be used with any content management system.

Available Font Styles

Nunito Sans (Sans Serif)

  • sans-serif-light: 300 (fmr. avenir-light: 100)
  • sans-serif-book: 400 (fmr. avenir-book: 200)
  • sans-serif-roman: 500 (fmr. avenir-roman: 300)
  • sans-serif-medium: 600 (fmr. avenir-medium: 400)
  • sans-serif-heavy: 700 (fmr. avenir-heavy: 500)
  • sans-serif-black: 800(fmr. avenir-black: 600)

Italic fonts are available for each weight.

Produkt (Serif)

  • produkt-thin: 100
  • produkt-extra-light: 200
  • produkt-light: 300
  • produkt-regular: 400

Embedding Fonts

To embed the fonts into a webpage, simply copy this code into the <head> of your HTML document.

<link href="https://webfonts.brand.ucsb.edu/webfont.min.css" rel="stylesheet">

Specify in CSS

Now that your HTML document has access to the fonts, you can use them to style your text.
In your style sheets, apply the attributes:

font-family
font-weight
font-style

All three attributes are necessary to get the font working in all browsers. 
 

.sans-serif-light {
  font-family:"Nunito Sans", sans-serif;
  font-weight:300; 
  font-style:normal;
}

.sans-serif-black-italic {
  font-family:"Nunito Sans", sans-serif; 
  font-weight:800; 
  font-style:italic; 
}

.produkt-thin {
  font-family:Produkt, serif; 
  font-weight:100; 
  font-style:normal;
}

Changing Font Weight and Italics

We suggest using the numerical font-weight value (Nunito Sans: 300-800, Produkt: 100-400).

You can italicize Nunito Sans text by changing the font-style attribute to font-style:italic.

Usage Guidelines

Nunito Sans, our primary typeface, is recommended for all body copy, subheads, and headlines. The default styles for Nunito Sans should be as follows:

Normal text:

body {
 color: #3d4952;
 font-family: "Nunito Sans", sans-serif;
 font-weight: 400;
 font-style: normal;
 font-size: 16px;
}

 

Headings:

h1 { font-family: "Nunito Sans", sans-serif; font-weight: 800; font-size: 38px; letter-spacing: -0.1pt; }

 

h2 { font-family: "Nunito Sans", sans-serif; font-weight: 800; font-size: 27px; letter-spacing: -0.1pt; }

 

h3 { font-family: "Nunito Sans", sans-serif; font-weight: 800; font-size: 21px; }

 

h4 { font-family: "Nunito Sans", sans-serif; font-weight: 800; font-size: 16px; }

 

h5 { font-family: "Nunito Sans", sans-serif; font-weight: 800; font-size: 12px; }

 

h6 { font-family: "Nunito Sans", sans-serif; font-weight: 600; font-size: 12px; }

 

 

Produkt is our secondary typeface. Produkt should primarily be used in large headlines and quotes.

 

Display Extra Large

68px weight 200

 

Display Large 

50px weight 300

 

Display Medium 

48px weight 300

 

Display Small 

28px weight 300

Accessibility

The University of California Information Technology Accessibility Policy requires compliance with the WCAG 2.0 level AA standards for all web-based information. Our Digital Color Palette meets the AA standard on normal (14 to 18px) text. You should check the color contrast ratio when you put text over colored background. We recommend use of the following accessibility checking tools to ensure that your sites meet the AA standard before launch.

Color contrast checker: https://webaim.org/resources/contrastchecker/

Siteimprove: http://siteimprove.ucop.edu

For more information about the University's Accessibility initiative, visit https://www.ucop.edu/electronic-accessibility/index.html

Switching from Avenir to Nunito Sans on your website

UCSB Web Theme site

If your site uses the UCSB Web Theme framework, you're all set! The framework's CSS has already been updated to replace Avenir with Nunito Sans. If your site includes custom CSS or modules that reference the Avenir font, please follow the steps below.

 

 

  1. Ensure your site is using the correct CSS CDN: https://webfonts.brand.ucsb.edu/webfont.min.css
  2. In your site folder, perform a case-insensitive search for the term "avenir" using "Find in Folder"
    1. If your site uses Asset Injector module, check the CSS there as well
  3. Update the Avenir font references with the corresponding Nunito Sans equivalents:
    • avenir-light: 100 -> sans-serif-light: 300
    • avenir-book: 200 -> sans-serif-book: 400
    • avenir-roman: 300 -> sans-serif-roman: 500
    • avenir-medium: 400 -> sans-serif-medium: 600
    • avenir-heavy: 500 -> sans-serif-heavy: 700
    • avenir-black: 600 -> sans-serif-black: 800

Example - CSS

-- Before --

body {
color: #3d4952;
font-family: Avenir, "Century Gothic", sans-serif;
font-weight: 200;
font-style: normal;
font-size: 1.6rem;
margin-top: 0;
line-height: 2.3rem;
}

-- After --

body {
color: #3d4952;
font-family: "Nunito Sans", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 1.6rem;
margin-top: 0;
line-height: 2.3rem;
}

Example - SASS

-- Before --

(/themes/mytheme/scss/_default-variables.scss)
$avenir-font-stack: Avenir, "Century Gothic", sans-serif;

$avenir-light: 100;
$avenir-book: 200;
$avenir-roman: 300;
$avenir-medium: 400;
$avenir-heavy: 500;
$avenir-black: 600;

$sans-serif: $avenir-book;

(/themes/mytheme/scss/_overwrite.scss)
body {
color: $lightgray-darken-60;
font-family: $avenir-font-stack;
font-weight: $sans-serif;
font-style: normal;
font-size: $base-font-size;
margin-top: 0;
line-height: 2.3rem;
}

 

-- After --

(/themes/mytheme/scss/_default-variables.scss)
$sans-serif-font-stack: "Nunito Sans", sans-serif;

$sans-serif-light: 300;
$sans-serif-book: 400;
$sans-serif-roman: 500;
$sans-serif-medium: 600;
$sans-serif-heavy: 700;
$sans-serif-black: 800;

$sans-serif: $sans-serif-book;

(/themes/mytheme/scss/_overwrite.scss)
body {
color: $lightgray-darken-60;
font-family: $sans-serif-font-stack;
font-weight: $sans-serif;
font-style: normal;
font-size: $base-font-size;
margin-top: 0;
line-height: 2.3rem;
}

Questions or need assistance? Please contact webtheme@brand.ucsb.edu.