Fonts
Component status:Ready
Our brand fonts, Buckeye Serif 2 and Buckeye Sans 2, are available as web fonts and built directly into BUX.
Built into BUX#
If you are using the BUX CDN or Sass files, you will not need to install the fonts separately.
The fonts can be referenced in your css via the following names: BuckeyeSerif
and BuckeyeSans.
They are also accessible via the following Sass variables:
$serif: "BuckeyeSerif", "Georgia", serif;
$sans: "BuckeyeSans", "HelveticaNeue", "Helvetica", "Arial", sans-serif;
Available font weights#
Buckeye Serif 2#
| Weight | CSS Value |
|---|---|
| Regular | 400 |
| SemiBold | 600 |
| Bold | 700 |
| Black | 900 |
Buckeye Sans 2#
| Weight | CSS Value |
|---|---|
| Regular | 400 |
| SemiBold | 600 |
| Bold | 700 |
| ExtraBold | 800 |
| Black | 900 |
Usage in BUX components#
Each BUX component and typographic base style will utilize our Buckeye fonts in the appropriate recommended style, size, color, and weight. If you are working on an element that is not covered in BUX, please refer to the Brand Center Fonts section for additional typography guidelines.
Accessing webfonts outside of BUX#
If you are not ready to use BUX, but would like to utilize the webfonts, you may import them directly into your project either via a linked stylesheet or a css/Sass url import.
<link rel="stylesheet" href="https://assets.bux.osu.edu/bux-webfonts2/bux-webfonts2.css" />
@import url("https://assets.bux.osu.edu/bux-webfonts2/bux-webfonts2.css");