permalink	layout
/index.html	html.njk

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

{% fontPicker %}

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

• Version 4.0
• Website
• Download
• Custom axis opsz 14–32 (optical size)

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

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

Rubik

• Version 2.200
• Website
• Download

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

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

Playfair

• Version 1.202
• Website
• Download

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

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

Open Sans

• Version ebedbda (git commit)
• Website
• Download

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

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

Montserrat

• Version 7.222
• Website
• Download

@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.