Curated Open-Source Variable Font Library by Scape Press
font.gl is a curated collection of open-source variable fonts by Scape Press, packaged for the web: WOFF2 + TTF files, a ready-to-use stylesheet, and a Sass API to generate exactly the @font-face rules you need.
| Key | Family | Classification | Weight axis | Designer | License |
|---|---|---|---|---|---|
manrope |
Manrope | Sans-serif | wght 200–800 |
Mikhail Sharanda | SIL OFL 1.1 |
quicksand |
Quicksand | Rounded sans | wght 300–700 |
Andrew Paglinawan | SIL OFL 1.1 |
alvarado |
Alvarado | Serif | wght 0–100, ital 0–100 |
Hector Torres | SIL OFL 1.1 |
npm i font.glLink the compiled stylesheet. It declares every font, exposes --font-<key> custom properties and .font-<key> utility classes, and expects the font/ directory next to css/ (as shipped):
<link rel="stylesheet" href="node_modules/font.gl/css/font.gl.css">
<h1 class="font-manrope">Hello</h1>
<p style="font-family: var(--font-quicksand)">World</p>Configure the stylesheet on import — for example when you serve the font files from your own path:
@use "pkg:font.gl" with (
$font-path: "/assets/fonts", // default: "../font"
$font-display: swap,
$font-formats: ("woff2": "woff2"), // drop the TTF fallback
$font-emit-utilities: false,
);Or use only the functions and mixins, which emit no CSS on their own:
@use "pkg:font.gl/scss/font" as font;
@include font.font-face("manrope");
body {
@include font.font("manrope"); // font-family stack
@include font.font-smoothing; // antialiased / grayscale
font-weight: 600;
}pkg: URLs need Dart Sass with the Node package importer (--pkg-importer=node, or importers: [new NodePackageImporter()]).
The package also exports a typed catalogue of the bundled fonts, for build tools, font pickers or preloading:
import { fonts, fontKeys, fontStack, type FontKey } from "font.gl";
fonts.manrope.weight; // [200, 800]
fonts.alvarado.axes; // [{ tag: "wght", min: 0, default: 0, max: 100 }, ...]
fonts.quicksand.files.woff2; // "font/quicksand/quicksand-variable.woff2"
fontStack("manrope"); // '"Manrope", ui-sans-serif, system-ui, sans-serif'File paths are relative to the package root (font.gl/font/...).
Alvarado's axes don't follow the CSS scales (wght runs 0–100: Light 0, Regular 25, Medium 50, Bold 100), so font-weight and font-style can't reach them. .font-alvarado and @include font.font("alvarado") drive the axes through custom properties instead:
.title {
--font-alvarado-wght: 100; /* Bold */
--font-alvarado-ital: 100; /* Italic */
}npm run build # kist: CSS, JS, Sass, fonts and dist/package.json into dist/
npm run lint # ESLint (src/ts) and stylelint (src/scss)
npm run typecheck
npm test # Sass output and font catalogue testsdist/ is the published package root. Open dist/html/index.html after a build for an interactive font tester.
font.gl is an open-source project by Scape Press.
Scape Press is a spatial innovation collective that dreams, discovers and designs the everyday of tomorrow. We blend design thinking with emerging technologies to create a brighter perspective for people and planet. Our products and services naturalise technology in liveable and sustainable –scapes that spark the imagination and inspire future generations.
- website: scape.press
- github: github.com/stylescape
We'd love for you to contribute and to make this project even better than it is today! Please refer to the contribution guidelines for information.
Copyright © 2024 Scape Press BV.
The font.gl code (Sass, build configuration, demo) is licensed under the MIT License.
The bundled fonts are not covered by the MIT License; each keeps its own license, shipped next to the font files:
- Manrope — SIL Open Font License 1.1
- Quicksand — SIL Open Font License 1.1, with Reserved Font Name "Quicksand"
- Alvarado — SIL Open Font License 1.1, published by Primary Foundry
THIS SOFTWARE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.
Made by Scape Press