Design Tokens for Mesh have just been released!
Skip to content

Font face declarations for nib and partners.

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.


npm install @nib/fonts


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.

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

Interactive demo

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>


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.