Open Lab fonts


This site is the documentation for and hosting of curated fonts for Open Lab websites and apps.

Why?

  • No visitor tracking
  • Modern formats like variable fonts and woff2
  • No reliance on 3rd party services

Fonts

These are the fonts we've added so far, let us know if you'd like another.

The css examples below are simplified, make sure to read Importing fonts below.

Inter

@import 'https://fonts.openlab.dev/inter/inter.css';

html {
  font-family: 'Inter var', 'Inter', system-ui, sans-serif;
}

Rubik

@import 'https://fonts.openlab.dev/rubik/rubik.css';

html {
  font-family: 'Rubik var', 'Rubik', system-ui, sans-serif;
}

Playfair

@import 'https://fonts.openlab.dev/playfair/playfair.css';

html {
  font-family: 'Playfair Display var', 'Playfair Display', serif;
}

Open Sans

@import 'https://fonts.openlab.dev/open-sans/open-sans.css';

html {
  font-family: 'Open Sans var', 'Open Sans', system-ui, serif;
}

Montserrat

@import 'https://fonts.openlab.dev/montserrat/montserrat.css';

html {
  font-family: 'Montserrat var', 'Montserrat', system-ui, serif;
}

Importing fonts

Take the css file of the font and link to it from your HTML document like this:

<link rel="stylesheet" href="URL" />

or import it from your existing style sheet:

@import 'URL';

You should add a preconnect tag to speed things up:

<link rel="preconnect" href="https://fonts.openlab.dev/" />

You should test for variable fonts using a @supports media query:

:root {
  font-family: 'Inter', system-ui, sans-serif;
}
@supports (font-variation-settings: normal) {
  :root {
    font-family: 'Inter var', system-ui, sans-serif;
  }
}

Self-hosting

You can also download an entire family using the "download" link to get all assets in a zip, then you integrate with your project however you like.