non.geist

não.Geist

Um pacote para usar os tipos de letra de Vercel, Geist－ Sans & Mono ( v 1.4 ), para projetos que não são do NEXT.JS.

O porquê

Tentei usar o Geist em um projeto React, ele errou (depende da next/font ). Gosto da flexibilidade que um pacote oferece － Não precisando gerenciar ativos (ou dependências); Acho que muitos desenvolvedores preferem isso, talvez.
Agora, nem é um aborrecimento para @font-face uma fonte (ou tipo de letra), é ainda mais fácil com fontes variáveis. Independentemente disso, é um sólido bom de ter (pacote).

Instalação

npm i non.geist

yarn add non.geist

pnpm i non.geist

bun add non.geist

Uso

A importação padrão fornece fontes variáveis .

Em sua entrada, o arquivo .js (x) ou .ts (x), você pode importar assim:

 import 'non.geist'

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

então,

 body {
  font-family : 'Geist Variable' ;

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

ou faça isso no CSS diretamente

 @import url ( 'non.geist' );

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

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

Fontes variáveis o tempo todo, mas se você precisar de Geist sem pesos individuais:

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 o 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 individuais:

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

Variado

Regras adicionais @font-face :

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

Para explorar os conjuntos estilísticos do tipo de tipo de letra, use a propriedade de font-feature-settings do CSS.

Licença

Licença

Créditos

Obrigado Vercel

---

Desenvolvimento

Para instalar dependências:

bun install

Para correr:

 cd ./scripts
bun run index.ts

Este projeto foi criado usando bun init em Bun v1.0.3. O BUN é um tempo de execução do JavaScript All-in-One Fast.