Whitney Web Font Implementation Instructions

Whitney Styles

The Whitney web font styles available are:

1. ScreenSmart Book

ScreenSmart Book

2. ScreenSmart Book Italic

ScreenSmart Book Italic

3. ScreenSmart Semibold

ScreenSmart Semibold

How to Use the Web Font

Note: Before using the instructions below, please make sure you have submitted a request to access the Whitney web font. The Whitney web fonts are only available to UBC Departments for websites that use the UBC CLF (Common Look and Feel) templates, and a .ubc.ca subdomain. The Whitney web font will not work unless we add your domain name to the approved domains list.

Request Whitney web font

Step 1 — calling the fonts:

Add the following CSS key anywhere before the </head> tag:

For Development sites: 

<link rel="stylesheet" type="text/css" href="//cloud.typography.com/6804272/697806/css/fonts.css" />

For Production sites: 

<link rel="stylesheet" type="text/css" href="//cloud.typography.com/6804272/781004/css/fonts.css" />

Step 2 — CSS font styling:

Whitney ScreenSmart Book

This style is recommended for body text.

font-family: 'Whitney SSm A', 'Whitney SSm B', Arial;
font-weight: 400;
font-style: normal;

Whitney ScreenSmart Book Italic
font-family: 'Whitney SSm A', 'Whitney SSm B', Arial;
font-weight: 400;
font-style: italic;

Whitney ScreenSmart Semibold
font-family: 'Whitney SSm A', 'Whitney SSm B', Arial;
font-weight: 600;
font-style: normal;

If you have any questions, please contact the UBC Digital Communications Team.

How to Use the Web Font on the UBC CMS

Prerequisites

  • Make sure you have administrator access to your CMS website.
  • Enable the Custom CSS plugin on the Plugins page.

Steps

  1. In the Dashboard, under Plugins, ensure that the UBC CLF Whitney webfont plugin is activated
  2. Navigate to the Settings section in the Dashboard and select Reading
  3. Under UBC Brand Font Source settings, choose the appropriate environment for the Whitney font:
    • For the Production environment, select Production
    • For the Development environment, choose Development
  4. Go to Appearance in Dashboard, enter Custom CSS
  5. Define you CSS styles with: 
    font-family: 'Whitney SSm A', 'Whitney SSm B', Arial, sans-serif;
  6. Click on Save CSS.
  7. Preview the page in a browser to make sure everything looks as intended.

If you have any questions, please contact the UBC Digital Communications Team.