# Canvas Kit Fonts
By default, no fonts are included with Canvas Kit modules. To use official Canvas Kit fonts, install
and import the `@workday/canvas-kit-react-fonts` module. Note that this module sources fonts from
the Workday CDN.
## Installation
```sh
yarn add @workday/canvas-kit-react-fonts
```
## Usage
Canvas Kit components uses the CSS-in-JS library [emotion](https://emotion.sh) for styling. So the
preferred method for adding fonts to a project is to use the library's `Global` component. It will
apply emotion styles globally to your project. If you're using Canvas Kit components already, you
should have emotion added to your project. If not, start by adding it as a dependency:
```sh
yarn add emotion
```
Then in your index or main file of your project...
```tsx
import {Global, css} from '@emotion/react';
import {fonts} from '@workday/canvas-kit-react-fonts';
// Inject all of Canvas' @font-face declarations to via emotion
;
```
Finally, use one of our official typography styles from the `canvas-kit-react-core` module. If you
need to build your own typography styles use `fontFamily` or `monoFontFamily` font lists from the
same module.
Examples:
```tsx
import {css} from '@emotion/react';
import {type} from '@workday/canvas-kit-react/tokens';
...
render(
// Uses the official 'body' style from Canvas' typography styles
return Lorem Ipsum...
)
```
or
```tsx
import {createStyles} from '@workday/canvas-kit-styling';
import {system} from '@workday/canvas-tokens-web';
// Custom typography using the official Canvas font list
const customParagraph = createStyles({
fontFamily: system.fontFamily.default, // "Roboto", "Helvetica Neue", "Helvetica", Arial, sans-serif
});
const customPre = createStyles({
fontFamily: system.fontFamily.mono, // "Roboto Mono", "Courier New", Courier, monospace
});
```