HTML


54 - Fuentes en la Web: Dale estilo a tus textos ✍️

Las fuentes en la web permiten personalizar la tipograf铆a de tu sitio, d谩ndole personalidad y legibilidad. Gracias a @font-face puedes cargar cualquier fuente externa y usarla en tu proyecto.



1. La regla de la cara (@font-face)

Con @font-face puedes cargar una fuente personalizada y asignarle un nombre para usarla en tu sitio web. 

@font-face {
  font-family: "MiFuente";
  src: url("fuentes/MiFuente.woff2") format("woff2");
}
p {
  font-family: "MiFuente", sans-serif;
}


2. Diferentes formatos de fuente

Los principales formatos de fuente son:

  • TTF/OTF – TrueType / OpenType
  • WOFF – Web Open Font Format
  • WOFF2 – Versi贸n optimizada de WOFF
  • SVG – Fuentes vectoriales (ya en desuso)
  • EOT – Embedded OpenType (usado en IE)


3. Soporte de navegador para formatos de fuente

No todos los navegadores soportan todos los formatos. Aqu铆 tienes una tabla de compatibilidad:

Formato Chrome Firefox Edge Safari Opera
TTF/OTF ✔️ ✔️ ✔️ ✔️ ✔️
WOFF ✔️ ✔️ ✔️ ✔️ ✔️
WOFF2 ✔️ ✔️ ✔️ ✔️ ✔️
SVG ❌ ❌ ❌ ✔️ ❌
EOT ❌ ❌ ✔️ (IE) ❌ ❌


4. Usando la fuente que quieres

Una vez declarada la fuente con @font-face, puedes aplicarla a cualquier texto usando la propiedad font-family. 

h1 {
  font-family: "MiFuente", Arial, sans-serif;
}


5. Usando texto audaz

Para destacar, se usa la propiedad font-weight o la etiqueta <b>/<strong>. 

p {
  font-weight: bold;
}
p.alternativo {
  font-weight: 700;
}

Texto normal

Texto audaz



6. Font Descriptors

En la siguiente tabla se enumeran todos los descriptores de fuente que se pueden definir dentro de la regla @font-face:

Descriptor Valores Descripci贸n
font-family name Obligatorio. Define un nombre para la fuente
src URL Obligatorio. Define la URL del archivo de fuente
font-stretch normal, condensed, expanded... Opcional. Define c贸mo se estira la fuente (default: normal)
font-style normal, italic, oblique Opcional. Estilo de la fuente (default: normal)
font-weight normal, bold, 100-900 Opcional. Grosor de la fuente (default: normal)
unicode-range U+0-10FFFF Opcional. Define el rango de caracteres UNICODE soportados