Getting Started

Metropolis has just been published by typehaus on the NPM registry! While still in experimental stages, this makes it easier than ever to include it in your projects.

1. Install

pnpm add @typehaus/metropolis

Don't have PNPM? Click here to find out why you should dump NPM.

2. Import

The following methods work in most of the popular frontend frameworks.

• Next.js — add it to _app.tsx or _app.jsx
• SvelteKit: add it to __layout.svelte file.
• Nuxt.js: ...consult their documentation, because I'm not quite sure 😅

You can just import the whole family, if you're into that sort of thing:

import '@typehaus/metropolis'

You can also import individual weights (recommended). Both the normal and italic style are included in each weight, and (for compatibility) both the keyword or numeric filename work just fine.

import '@typehaus/metropolis/thin.css'

import '@typehaus/metropolis/100.css'

import '@typehaus/metropolis/extralight.css'

import '@typehaus/metropolis/xlight.css'

import '@typehaus/metropolis/200.css'

import '@typehaus/metropolis/light.css'

import '@typehaus/metropolis/300.css'

import '@typehaus/metropolis/regular.css'

import '@typehaus/metropolis/book.css'

import '@typehaus/metropolis/400.css'

import '@typehaus/metropolis/medium.css'

import '@typehaus/metropolis/500.css'

import '@typehaus/metropolis/semibold.css'

import '@typehaus/metropolis/600.css'

import '@typehaus/metropolis/bold.css'

import '@typehaus/metropolis/700.css'

import '@typehaus/metropolis/extrabold.css'

import '@typehaus/metropolis/xbold.css'

import '@typehaus/metropolis/800.css'

import '@typehaus/metropolis/black..css'

import '@typehaus/metropolis/900.css'

3. Implement

Now you just need to add it to your actual CSS!

With some backups, so nobody is stuck with Times New Roman:

html, body {
  font-family: 'Metropolis', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Open Sans', 'Helvetica Neue', sans-serif;
}

Specimens

The Unlicense

Contributions welcome.