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.
yarn add @workday/canvas-kit-react-fontsCanvas Kit components uses the CSS-in-JS library emotion 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:
yarn add emotionThen in your index or main file of your project...
import {Global, css} from '@emotion/react';
import {fonts} from '@workday/canvas-kit-react-fonts';
// Inject all of Canvas' @font-face declarations to <head> via emotion
<Global styles={css(fonts)} />;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:
import {css} from '@emotion/react';
import {type} from '@workday/canvas-kit-react/tokens';
...
render(
// Uses the official 'body' style from Canvas' typography styles
return <p css={type.body}>Lorem Ipsum...</p>
)or
import styled from '@emotion/styled';
import {fontFamily, monoFontFamily} from '@workday/canvas-kit-react/tokens';
// Custom typography using the official Canvas font list
const customParagraph = styled('p')({
fontFamily: fontFamily, // "Roboto", "Helvetica Neue", "Helvetica", Arial, sans-serif
});
const customPre = styled('pre')({
fontFamily: monoFontFamily, // "Roboto Mono", "Courier New", Courier, monospace
});