@workday/canvas-kit-react-fonts
TypeScript icon, indicating that this package has built-in type declarations

12.1.1 • Public • Published

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

yarn add @workday/canvas-kit-react-fonts

Usage

Canvas 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 emotion

Then 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
});

Package Sidebar

Install

npm i @workday/canvas-kit-react-fonts

Weekly Downloads

491

Version

12.1.1

License

Apache-2.0

Unpacked Size

19.3 kB

Total Files

17

Last publish

Collaborators

  • merve.batan
  • raisa.primerova
  • jaclynjessup
  • nicholasboll
  • alanbsmith
  • workday-canvas-kit
  • justin.pante
  • anicholls