Documentation
Guidelines
Typography

Typography

The typography and typescales

Import statement

import {  } from "@wfp/react"

Depending on your frontend stack you can use different methods to load the fonts. The following examples are for React and Next.js. If you are using a different stack, please refer to the Google Fonts documentation.

Vite or Create React App

Install the @fontsource/open-sans packages for the fonts you want to use.

npm install @fontsource/open-sans

Import the font in your app.

import "@fontsource/open-sans/latin.css";

For Noto Sans, you can use @fontsource/noto-sans.

npm install @fontsource/noto-sans

Import the font in your app.

import "@fontsource/noto-sans/latin.css";

Next.js

next/font will automatically optimize your fonts (including custom fonts) and remove external network requests for improved privacy and performance.

Install the next/font package.

npm install next/font

Make sure to set the --font-family-primary CSS variable as seen below.

import { Open_Sans } from "next/font/google";


// If loading a variable font, you don’t need to specify the font weight
const openSans = Open_Sans({
  subsets: ["latin"],
  variable: "--font-family-primary", // CSS variable name used by the Design System
});


export default function MyApp({ Component, pageProps }) {
  return (
    <main className={openSans.className}>
      <Component {...pageProps} />
    </main>
  );
}

For Noto Sans use the following import.

import { Noto_Sans } from "next/font/google";


const notoSans = Noto_Sans({
  subsets: ["latin"],
  variable: "--font-family-primary", // CSS variable name used by the Design System
});

Reference

On this page