Vercel's Geist font for non-Next.js projects
npm install non.geist!Word cloud forming the text 'non-geist' in ASCII with a blue gradient effect
A package to use Vercelʼs typefaces, Geist- Sans & Mono (v 1.6), for non-Next.js projects.
I tried to use Geist in a React project, it errored out (it depends on next/font). I like the flexibility a package offers - not having to manage assets (or dependencies); I take it a lot of devs prefer this, maybe.
Now, itʼs not even a hassle to @font-face a font (or typeface), itʼs even easier with variable fonts. Regardless, itʼs a solid nice-to-have (package).
``bash`
npm i non.geist
`bash`
yarn add non.geist
`bash`
pnpm i non.geist
`bash`
bun add non.geist
Breaking change: Renamed the font-family from Geist Variable → Geist-Variable.
All CSS using the old name must be updated, e.g.:
`diff`
- font-family: "Geist Variable";
+ font-family: "Geist-Variable";
`diff`
- font-family: "Geist Mono Variable";
+ font-family: "GeistMono-Variable";
Italic typeface addition: Geist 1.5.1 introduced standalone italic font files. See PR, and _Usage_ below.
The default import provides variable fonts.
In your entry .js(x) or .ts(x) file, you can import like so:
`js
import 'non.geist' // OR
import 'non.geist/italic'
// For Geist Mono
import 'non.geist/mono' // OR
import 'non.geist/mono-italic'
`
then,
`css
body {
font-family: 'Geist-Variable';
/ For Geist Mono /
font-family: 'GeistMono-Variable';
}
`
or do it in CSS directly
`css
@import url('non.geist');
body {
font-family: 'Geist-Variable';
}
/ For Geist Mono /
@import url('non.geist/mono');
font-family: 'GeistMono-Variable';
`
Variable fonts all the way, but if you need Geist sans individual weights:
`js`
import 'non.geist/font-faces/Geist-Black.css'
/ For Italic equivalent: -Italic.css */
import 'non.geist/font-faces/Geist-BlackItalic.css'
import 'non.geist/font-faces/Geist-Bold.css'
import 'non.geist/font-faces/Geist-Light.css'
import 'non.geist/font-faces/Geist-Medium.css'
import 'non.geist/font-faces/Geist-Regular.css'
import 'non.geist/font-faces/Geist-SemiBold.css'
import 'non.geist/font-faces/Geist-Thin.css'
import 'non.geist/font-faces/Geist-UltraBlack.css'
import 'non.geist/font-faces/Geist-UltraLight.css'
For Geist Mono:
`js`
import 'non.geist/font-faces/GeistMono-Black.css'
/ For Italic equivalent: -Italic.css */
import 'non.geist/font-faces/GeistMono-BlackItalic.css'
import 'non.geist/font-faces/GeistMono-Bold.css'
import 'non.geist/font-faces/GeistMono-Light.css'
import 'non.geist/font-faces/GeistMono-Medium.css'
import 'non.geist/font-faces/GeistMono-Regular.css'
import 'non.geist/font-faces/GeistMono-SemiBold.css'
import 'non.geist/font-faces/GeistMono-Thin.css'
import 'non.geist/font-faces/GeistMono-UltraBlack.css'
import 'non.geist/font-faces/Geist-MonoUltraLight.css'
font-family values for individual weights:
`css
@import url('non.geist/font-faces/Geist-Bold.css');
font-family: 'Geist-Bold';
/ Geist Mono /
@import url('non.geist/font-faces/GeistMono-Bold.css');
font-family: 'GeistMono-Bold';
`
For italic font files:
`css
@import url('non.geist/font-faces/Geist-BoldItalic.css');
font-family: 'Geist-BoldItalic';
/ Geist Mono /
@import url('non.geist/font-faces/GeistMono-BoldItalic.css');
font-family: 'GeistMono-BoldItalic';
`
To explore the typefaces' stylistic sets, use CSS's font-feature-settings property.
Try wakamaifondue for typeface exploration.
Thank you Vercel & contributors (via PRs & Issues)
---
To install dependencies:
`bash`
bun install
To run:
`bash`
cd ./scripts
bun run index.ts
This project was created using bun init` in bun v1.0.3. Bun is a fast all-in-one JavaScript runtime.
!Word cloud forming the text 'non-geist' in ASCII with a red-blue gradient effect