Using our Web Font "Champion" - PurdueMarketingAndMedia/purdueTemplates-2015 GitHub Wiki

Purdue Marketing and Media has purchased the rights to use various versions of Champion, one of our brand fonts, on the web. Trust us, it ain’t cheap! But we value our brand and want you to have the freedom to carry our brand identity onto the web. Now your web presence can match your printed pieces.

How to Use

You can implement Champion one of two ways. Either 1) include the font CSS within your page(s) OR 2) include the SCSS partial(s) into your own CSS.

Option 1: Font CSS

Include the following stylesheet in the <head> element of your page(s):

<link rel="stylesheet" type="text/css" href="https://www.purdue.edu/purdue/fonts/champion-all.css" />

This will load the following fonts onto your page:

Champion Bantamweight
Champion Featherweight
Champion Lightweight
Champion Welterweight
Champion Middleweight
Champion Heavyweight

Once you have implemented the fonts to your desired page(s), you should be able to apply it to various elements via CSS:

.exampleSelector {
  font-family: "Champion Middleweight", "fallback", etc.
}

Option 2: SCSS Partial(s)

You can also selectively add the associated partials to your your own CSS:

Font-Family Values

The following names are valid font-family values:

"Champion Bantamweight"
"Champion-HTC-Bantamweight"
"Champion Featherweight"
"Champion-HTC-Featherweight"
"Champion Lightweight"
"Champion-HTC-Lightweight"
"Champion Welterweight"
"Champion-HTC-Welterweight"
"Champion Middleweight"
"Champion-HTC-Middleweight"
"Champion Heavyweight"
"Champion-HTC-Heavyweight"

Note: Font-family names that begin with "Champion-HTC" are included to mimic output from some desktop design software, such as Adobe Illustrator. This makes it easy to build and use SVGs without the hassle of renaming desktop fonts that don’t match the associated web-font name. Trust us, we were excited about this.

Learn more about the font.