Skip to content
Autumn 2026 Mesh Release and Design Tokens v2 now available! Read the announcement
    DesignDevelopAnalyticsFeedback
    Stable

    Fonts

    Font face declarations for nib and partners.

    GitHub, opens in a new tab·Storybook, opens in a new tab

    Font declarations are automatically bundled in Theme

    Since v6.9.0 of the Theme package, font face declarations are automatically included for you by the Theme component. You do not need to list this package as a dependency, and you do not need to write any code to load the correct fonts, for any brand.

    Installation

    bash
    npm install @nib-group/mesh-fonts

    Usage

    When using @nib-group/[email protected] or later, there is no need to manually import font components. Theme includes the correct font declarations for the active brand automatically.

    If you still want to import fonts for a specific brand manually, there are two ways of doing so. You can import the GlobalStyle component and render it in your app, or you can import the font-face declarations directly into your CSS.

    jsx
    // GlobalStyle component import
    import {NibFonts} from '@nib-group/mesh-fonts/nib';
    

    const MyApp = () => (
      <>
        <NibFonts />
        <h1>Hello World</h1>
      </>
    );
    jsx
    // Font-face declarations import
    import {nibFontFaceDeclarations} from '@nib-group/mesh-fonts/nib';
    

    const MyApp = () => (
      <>
        <style>{nibFontFaceDeclarations}</style>
        <h1>Hello World</h1>
      </>
    );

    Props

    There are no props for these font components.

    Google fonts

    Some brands use fonts that are available on google fonts, however it is more performant to self-host the font files. As such, all partner font files are included on our static assets CDN and font-face declarations in this package.

    Edit this page