Añadir y usar fuentes personalizadas en tu aplicación React es un proceso muy sencillo. A continuación te muestro una de las formas de hacerlo.

Tabla de contenidos

Agregar el Archivo de la Fuente a tu Proyecto

Una vez tengas los archivos de la fuente que deseas utilizar, en el directorio src de tu proyecto React crea un directorio llamado fonts.

Luego, para cada fuente que vayas a utilizar, sigue estos pasos:

    1. En el directorio fonts crea un directorio con el nombre de la fuente.
    1. En el directorio que acabas de crear coloca el o los archivos de la fuente.
      Si, por ejemplo, vas a utilizar una fuente en su versión normal y en su versión itálica, necesitarás agregar el archivo correspondiente a cada versión de la fuente.

      Importar la Fuente en tu Aplicación

      Ahora tienes que importar la fuente en tu aplicación. Para ello, en el archivo de estilos CSS define una regla @font-face por cada uno de los archivos de la fuente que agregaste a tu proyecto.

      En este ejemplo, estoy importando la fuente «Another Beauty» en sus variantes normal e itálica:

      index.css
      @font-face {
  font-family: "Another Beauty", "Playfair Display", Lora, serif;
  src: local("Another Beauty"),
    url("../fonts/another-beauty/Another-Beauty.woff2") format(woff2);
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Another Beauty", "Playfair Display", Lora, serif;
  src: local("Another Beauty"),
    url("../fonts/another-beauty/Another-Beauty-Italic.woff2") format(woff2);
  font-weight: 400;
  font-style: italic;
}
/* ...resto del código */
      CSS

      Para finalizar, si no lo has hecho aún, importa tu archivo CSS en el archivo de punto de entrada de tu aplicación (main.jsx, index.js o como se llame en tu caso):

      main.jsx
      import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";

import "./styles/index.css";

const root = document.getElementById("root") as HTMLElement;

ReactDOM.createRoot(root).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
      JSX

      Utilizar la Fuente en tus Estilos CSS

      Listo! Ahora ya puedes utilizar tus fuentes personalizadas en tus estilos CSS:

      CSS
      /* ...resto del código */
.header {
    font-family: "Another Beauty";
    font-weight: 400;
    font-style: normal;
}

.header-italic {
    font-family: "Another Beauty";
    font-weight: 400;
    font-style: italic;
}

/* ...resto del código */
      CSS

      3 Consideraciones Antes de Agregar Fuentes Personalizadas

      Agregar fuentes personalizadas a tu proyecto React puede darle un toque distintivo, pero antes de sumergirte en la personalización, considera estos tres puntos clave:

      Autorización y Licencias

      Antes de utilizar una fuente en tu aplicación, asegúrate de tener los derechos necesarios para hacerlo, ya sea que la obtengas de forma gratuita o mediante pago.

      Revisar y respetar la licencia y las condiciones de uso es fundamental para evitar problemas legales.

      Variantes Utilizadas

      Las fuentes pueden incluir varios archivos con una variedad de estilos y pesos. Para optimizar el rendimiento de tu aplicación, agrega a tu proyecto solo los archivos de las variantes que vas a utilizar.

      Formato de Archivo WOFF2

      El formato de archivo WOFF2 es ampliamente compatible y ofrece un excelente equilibrio entre calidad y tamaño de archivo. Al importar tus fuentes en este formato, favoreces una carga más rápida de la página.

      Si tus archivos de fuente están en formatos diferentes, como OTF, TTF o WOFF, puedes utilizar convertidores online para transformarlos a WOFF2 antes de integrarlos en tu proyecto.

        Eso ha sido todo. Espero que esta información te sea de utilidad. 😉

        Categorizado en:

        CSSDesarrollo WebFront EndReact

        Etiquetado en: