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