¿Cómo se importan y utilizan fuentes web personalizadas con @font-face en CSS?

La regla @font-face de CSS es una herramienta muy potente que te permite cargar y utilizar fuentes personalizadas en tus páginas web.

Esto significa que puedes emplear tipografías específicas que no necesariamente están instaladas en el ordenador del usuario, garantizando así una mayor consistencia visual en tu diseño.

Para importar y utilizar una fuente personalizada con @font-face, sigue estos pasos:

1. Declarar la fuente en tu CSS:
   Se utiliza la regla @font-face al principio de tu archivo CSS (o dentro de una etiqueta <style>). Dentro de esta regla, especificas varios descriptores:
   • font-family: Aquí defines el nombre que utilizarás para referirte a esta fuente en el resto de tu código CSS.src: Especifica la ruta (URL) donde se encuentra el archivo de la fuente. Es una práctica recomendada proporcionar múltiples formatos de fuente para asegurar la compatibilidad con la mayoría de los navegadores, usando url() para la ruta y format() para indicar el tipo. Se prioriza woff2 por su excelente compresión y soporte moderno, seguido de woff como alternativa.font-weight (opcional): Si estás cargando diferentes grosores de una misma familia tipográfica (ej. light, regular, bold), aquí especificas el peso de esta fuente en particular.font-style (opcional): Similar a font-weight, para especificar si la fuente es normal, italic u oblique.
   
   @font-face {
font-family: "NombreDeMiFuente"; /* Nombre que le das a la fuente */
src: url("/ruta/a/mis-fuentes/mi-fuente-regular.woff2") format("woff2"), url("/ruta/a/mis-fuentes/mi-fuente-regular.woff") format("woff");
font-weight: normal; /* o 400 */
font-style: normal;
}

@font-face {
font-family: "NombreDeMiFuente";
src: url("/ruta/a/mis-fuentes/mi-fuente-bold.woff2") format("woff2"), url("/ruta/a/mis-fuentes/mi-fuente-bold.woff") format("woff");
font-weight: bold; /* o 700 */
font-style: normal;
}
   
2. Utilizar la fuente en tus reglas CSS:
   Una vez que la fuente está declarada con @font-face, puedes aplicarla a cualquier elemento HTML utilizando la propiedad font-family con el nombre que definiste:
   
   body {
font-family: "NombreDeMiFuente", Arial, sans-serif; /* "NombreDeMiFuente" es la personalizada. Arial y sans-serif son fuentes de respaldo. */
}

h1 {
font-family: "NombreDeMiFuente", Helvetica, sans-serif;
font-weight: bold; /* Usará la variante 'bold' definida en @font-face si existe */ }

Importante:

• Asegúrate de que los archivos de fuente estén ubicados en una ruta accesible en tu servidor web.
• Verifica siempre las licencias de las fuentes que utilizas, ya que no todas permiten su incrustación en sitios web de forma gratuita o bajo las mismas condiciones.