https://github.com/digitalinteraction/fonts.openlab.dev
Redistribution of fonts we use
https://github.com/digitalinteraction/fonts.openlab.dev
Last synced: about 1 year ago
JSON representation
Redistribution of fonts we use
- Host: GitHub
- URL: https://github.com/digitalinteraction/fonts.openlab.dev
- Owner: digitalinteraction
- Created: 2023-01-19T12:15:37.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-11-08T14:32:39.000Z (over 1 year ago)
- Last Synced: 2025-02-09T21:46:18.032Z (over 1 year ago)
- Language: CSS
- Homepage: https://fonts.openlab.dev/
- Size: 43.9 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
---
permalink: /index.html
layout: 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](https://github.com/digitalinteraction/fonts.openlab.dev/issues) if you'd like another.
> The `css` examples below are simplified, make sure to read [Importing fonts](#importing-fonts) below.
### Inter
- Version 4.0
- [Website](https://rsms.me/inter/)
- [Download](https://fonts.openlab.dev/inter/inter.zip)
- Custom axis **opsz** `14–32` (optical size)
```css
@import 'https://fonts.openlab.dev/inter/inter.css';
html {
font-family: 'Inter var', 'Inter', system-ui, sans-serif;
}
```
### Rubik
- Version 2.200
- [Website](https://github.com/googlefonts/rubik)
- [Download](https://fonts.openlab.dev/rubik/rubik.zip)
```css
@import 'https://fonts.openlab.dev/rubik/rubik.css';
html {
font-family: 'Rubik var', 'Rubik', system-ui, sans-serif;
}
```
### Playfair
- Version 1.202
- [Website](https://github.com/clauseggers/Playfair)
- [Download](https://fonts.openlab.dev/playfair/playfair.zip)
```css
@import 'https://fonts.openlab.dev/playfair/playfair.css';
html {
font-family: 'Playfair Display var', 'Playfair Display', serif;
}
```
### Open Sans
- Version ebedbda ([git commit](https://github.com/googlefonts/opensans/commit/ebedbda589fe5bd861b02325aca98c86ad845251))
- [Website](https://www.opensans.com/)
- [Download](https://fonts.openlab.dev/open-sans/open-sans.zip)
```css
@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](https://github.com/JulietaUla/Montserrat)
- [Download](https://fonts.openlab.dev/montserrat/montserrat.zip)
```css
@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:
``
or import it from your existing style sheet:
`@import 'URL';`
You should add a [preconnect](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preconnect) tag to speed things up:
```html
```
You should test for variable fonts using a `@supports` media query:
```css
: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.