54 - Fuentes en la Web 🌐 | Guía completa con ejemplos y tablas

---

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.

Temas de la lección

• 1. La regla de la cara (@font-face)
• 2. Diferentes formatos de fuente
• 3. Soporte de navegador
• 4. Usando la fuente que quieres
• 5. Usando texto audaz
• 6. Font Descriptors

---

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

---

Ir al índice