Saltar al contenido principal

Fuentes

Con archivo o desde Google Fonts​

1. Agregar archivo​

  • Descargar la fuente y agregarla al proyecto
  • Si es desde Google Fonts, no es necesario este paso
public/fonts/Geist[wght].woff2

2. Agregar al estilo global​

src\styles\global.css
/* Si se importa desde Google Fonts */
/* @import url("https://fonts.googleapis.com/css2?family=Geist:[email protected]&display=swap"); */
@import "tailwindcss";

/* Si se agrego el archivo en public/fonts */
@font-face {
  font-family: "Geist";
  src: url("/fonts/Geist[wght].woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap; /* block */
}

@theme inline {
  --color-primary: #006fee;
  /* ... */

  --font-sans: "Geist", system-ui, sans-serif;
}

@layer base {
  /* ... */
}

Fontsource​

1. Instalar​

npm install @fontsource/<font-name>
pnpm add @fontsource/<font-name>
Ejemplo
pnpm add @fontsource/onest
Ejemplo. Variable
pnpm add @fontsource-variable/onest

2. Agregar al Layout​

---
import '@fontsource-variable/onest'; // Supports weights 100-900
---

<style is:global>
  html {
    font-family: "Onest Variable", system-ui, sans-serif;
  }
</style>