*nix Programming Mammals

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

    8.4.5 • 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
    });

    Install

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

    DownloadsWeekly Downloads

    757

    Version

    8.4.5

    License

    Apache-2.0

    Unpacked Size

    19.2 kB

    Total Files

    17

    Last publish

    Collaborators

    • workday-canvas-kit
    • justin.pante
    • byed
    • anicholls