| permalink | /index.html |
|---|---|
| layout | html.njk |
This site is the documentation for and hosting of curated fonts for Open Lab websites and apps.
- No visitor tracking
- Modern formats like variable fonts and woff2
- No reliance on 3rd party services
{% include "font-picker.njk" %}
These are the fonts we've added so far, let us know if you'd like another.
The
cssexamples below are simplified, make sure to read Importing fonts below.
@import 'https://fonts.openlab.dev/inter/inter.css'; html { font-family: 'Inter var', 'Inter', system-ui, sans-serif; }
@import 'https://fonts.openlab.dev/rubik/rubik.css'; html { font-family: 'Rubik var', 'Rubik', system-ui, sans-serif; }
@import 'https://fonts.openlab.dev/playfair/playfair.css'; html { font-family: 'Playfair Display var', 'Playfair Display', serif; }
- 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; }
@import 'https://fonts.openlab.dev/montserrat/montserrat.css'; html { font-family: 'Montserrat var', 'Montserrat', system-ui, serif; }
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; } }
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.