non.geist

no geísta

Un paquete para usar los tipos de letra de Vercel, Geist－ Sans & Mono ( V 1.4 ), para proyectos que no sean next.js.

El por qué

Traté de usar Geist en un proyecto React, se equivocó (depende de next/font ). Me gusta la flexibilidad que ofrece un paquete － no tener que administrar activos (o dependencias); Lo tomo muchos desarrolladores prefieren esto, tal vez.
Ahora, ni siquiera es una molestia a @font-face una fuente (o tipo de letra), es aún más fácil con fuentes variables. De todos modos, es un sólido agradable (paquete).

Instalación

npm i non.geist

yarn add non.geist

pnpm i non.geist

bun add non.geist

Uso

La importación predeterminada proporciona fuentes variables .

En su entrada .js (x) o .ts (x), puede importar así:

 import 'non.geist'

// For Geist Mono
import 'non.geist/mono'

entonces,

 body {
  font-family : 'Geist Variable' ;

  /* For Geist Mono */
  font-family : 'Geist Mono Variable' ;
}

o hacerlo en CSS directamente

 @import url ( 'non.geist' );

body {
  font-family : 'Geist Variable' ;
}
/* For Geist Mono */

@import url ( 'non.geist/mono' );
font-family : 'Geist Mono Variable' ;

Fuentes variables en todo el camino, pero si necesita Geist sin pesos individuales:

import ' non.geist/font-faces/Geist-Black.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 '

Para Geist Mono:

import ' non.geist/font-faces/GeistMono-Black.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 '

Valores font-family para pesos individuales:

 @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' ;

Misceláneas

Reglas adicionales @font-face :

 font-display : swap;
font-synthesis : none;

Para explorar los conjuntos estilísticos de tipos de letra, use la propiedad font-feature-settings de CSS.

Licencia

Licencia

Créditos

Gracias Vercel

---

Desarrollo

Para instalar dependencias:

bun install

Para correr:

 cd ./scripts
bun run index.ts

Este proyecto fue creado usando bun init en Bun V1.0.3. Bun es un tiempo de ejecución JavaScript todo en uno rápido.