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/fonts

Usage

Prior to @nib-components/[email protected], fonts were referenced by the theme, but not automatically included. Fonts needed to be manually imported for the brand you want and added to the root of your app.

jsx

import {NibFonts, GuFonts, ImanFonts} from '@nib/fonts';

Interactive demo

jsx

import Theme, {nib, gu} from '@nib-components/theme';
import {NibFonts, GuFonts} from '@nib/fonts';

const App = props => (
  <Theme theme={nib}>
    <>
      <NibFonts />
      <Theme theme={gu}>
        <>
          <GuFonts />
          <div>GU Health</div>
        </>
      </Theme>
      {children}
    </>
  </Theme>
);

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