Al crear una aplicación web, incluir tu fuente preferida es como la guinda del pastel. Las fuentes mejoran el texto, hacen que el sitio web sea más atractivo y brindan una mejor experiencia de usuario. Los diseñadores y desarrolladores aman y odian algunas fuentes, y usar la fuente predeterminada puede limitar su creatividad. Agregar fuentes personalizadas brinda a los desarrolladores la libertad de agregar una fuente externa a su aplicación.

Requisitos previos

En este tutorial, recomiendo encarecidamente que tengas conocimientos básicos de Tailwind CSS.

Supongo que el lector está familiarizado con Tailwind CSS y cómo integrar Tailwind en una aplicación. Si eres nuevo en Tailwind, puedes consultar la documentación oficial para obtener instrucciones sobre cómo instalarlo.

¿Qué es una fuente personalizada?

Las fuentes personalizadas son fuentes que no están disponibles para su uso de forma predeterminada. Las fuentes personalizadas no existen en su sistema y no están disponibles cuando se necesitan. Incluyen fuentes que usted compra, conecta, crea usted mismo o fuentes de marca especial que utiliza su empresa. Un ejemplo popular de fuente personalizada es la fuente de Google.

Agregar fuentes personalizadas a su proyecto

Cuando instalas Tailwind en tu proyecto, agrega un archivo llamado tailwind.config. Dentro del archivo tailwind.config es donde agregamos fuentes personalizadas, colores, plantillas de diseño de cuadrícula, tamaños de fuente, etc. Para agregar fuentes personalizadas, coloque las propiedades personalizadas entre el objeto extendido. Vea a continuación cómo se ve el archivo tailwind.config:

/* tailwind.config file */

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: { },
    },
  },
  plugins: [],
};

Para agregar una fuente personalizada, usaré Google Fonts. Vaya al sitio web de fuentes de Google, haga clic en Seleccionar estilos y luego seleccione su fuente preferida. Para este tutorial, usaré esta fuente Rubik. Vea la representación gráfica del sitio web con fuentes de Google a continuación, con los números encerrados en un círculo como guía:

Para adjuntar el enlace de Google a su archivo HTML, siga los siguientes pasos:

• Copia el enlace de Google.

• Vaya al archivo index.html.

• Busque la etiqueta principal y pegue el enlace de Google Fonts en su interior.
  

Usar fuentes personalizadas

Después de pegar las fuentes Rubik dentro del archivo index.html, la fuente Rubik debería estar disponible en tu proyecto, pero aún no puedes usarla.

Para usarlo:

Vaya al archivo tailwind.config.

Agregue la familia de fuentes dentro del objeto extendido.

Dentro de la familia de fuentes, le daré un nombre a la fuente; en este caso, el nombre es frotar. Puede tener cualquier nombre. Abra un corchete, agregue el nombre de la fuente ("Rubik") y una fuente de respaldo.

/* tailwind.config file */

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      fontFamily: {
        'rub': ["Rubik", "sans-serif"],
      },
    },
  },
  plugins: [],
};

Tailwind reconoce la fuente de Rubik, pero no la he utilizado. Vaya al archivo o componente en el que desea utilizar la fuente y agregue la fuente Rubik a sus atributos class=''/className=''. Para aplicar la fuente personalizada a su proyecto, use rub, no Rubik. Vea el siguiente ejemplo:

// the file/component 

import React from 'react'

function CustomFonts() {
  return (
    

        

            
            
Default Font
            
Hello My name is Emeka and I enjoy creating things that     
            live on the internet. I also write technical articles.
        
        

            
            
Custom Font(Rubik Font)
            
Hello My name is Emeka and I enjoy         
            creating things that live on the internet. I also write             
            technical articles.
        
    
  )
}

export default CustomFonts

Usar fuentes descargadas localmente

Para usar fuentes descargadas localmente, elegiré un sitio web aleatorio. Puede probar cualquier sitio web de su elección. Vaya al sitio web de Dafont, busque una fuente en la barra de búsqueda y luego descárguela a su computadora local. Vea la representación gráfica del sitio web de Dafont a continuación, con los números encerrados en un círculo como guía:

Extraiga el archivo zip (yo uso WinRAR para extraer), copie el archivo extraído y péguelo en una carpeta de su proyecto. Vea el siguiente ejemplo:

El siguiente paso es navegar hasta el archivo /index.css e insertar @font-face para incorporar la fuente personalizada al proyecto. Usaré ADELIA para la familia de fuentes y src: para especificar dónde está disponible la fuente.

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
    font-family: 'ADELIA';
    src: url('./fonts/ADELIA.ttf');
}

Para integrar la fuente Rubik, navega hasta el archivo tailwind.config y sigue los siguientes pasos:

• Agregue un nombre de clase de utilidad personalizado.

• Abrir un corchete

• Inserta 'ADELIA' y 'cursiva' como fuente de respaldo.

Aquí hay un ejemplo:

/* tailwind.config file */

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      fontFamily: {
        'rub': ["Rubik", "sans-serif"],
        'adelia': ['ADELIA', 'cursive']
      },
    },
  },
  plugins: [],
};

Ahora podemos usar la fuente en nuestro proyecto:

// the file/component 

import React from 'react'

function CustomFonts() {
  return (
    

        

            
            
Default font
            
Hello My name is Emeka and I enjoy creating things that     
            live on the internet. I also write technical articles.
        
        

            
            
Custom Font(Rubik Font)
            
Hello My name is Emeka and I enjoy         
            creating things that live on the internet. I also write             
            technical articles.
        
    
  )
}

export default CustomFonts

Conclusión

Puedes usar la fuente personalizada en cualquier componente o archivo. No hay limitaciones para un archivo o componente específico; puede usarlo en múltiples componentes o archivos a lo largo de su proyecto. Además, puede agregar más de una fuente personalizada al archivo de configuración. Espero que el artículo haya sido útil. Me gusta, comenta y comparte para que otros puedan aprender. Gracias.