Fonts

The CSS and web font files to easily self-host the Montserrat and Rubik fonts.

Quick installation#

This package has only the fonts variety available in Bedu's Design System, you can import the CSS, such as using a bundler like Webpack.

Using Montserrat Web Font

yarn add @exponentialeducation/montserrat // npm i @exponentialeducation/montserrat

or Rubik Web Font,

yarn add @exponentialeducation/rubik // npm i @exponentialeducation/rubik

Within your app entry file or site component, import it in.

import "@exponentialeducation/montserrat"; // Defaults to weight 400.

How to use#

It's as simple as importing it globally into _app.jsx or _app.tsx. Alternatively, you could choose to import it into a page component, however, the CSS will only be present within the page and not globally.

import "@exponentialeducation/montserrat";
import "@exponentialeducation/montserrat/700.css";

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

Supported variables:

• Weights: [400,600,700].
• Styles: [normal].
• Supported subsets: [latin, latin-ext].

Finally, you can reference the font name in a CSS stylesheet, CSS Module, or CSS-in-JS.

body {
  font-family: "Montserrat";
}

This packages allows you to selecty weights and even individual styles, allowing you to cut down on payload sizes to the last byte!

import "@exponentialeducation/montserrat/600.css"; // Weight 600.
import "@exponentialeducation/rubik/700.css"; // Weight 700.

Licensing#

It is important to always read the license for every font that you use. Most of the fonts in the collection use the SIL Open Font License, v1.1. Some fonts use the Apache 2 license. The Ubuntu fonts use the Ubuntu Font License v1.0.

Google Fonts License Attributions