← Todos los artículos

Tutoriales

Cambia las fuentes de cualquier sitio web con CSS

17 mayo 2026 · por JustZix Team

La tipografía hace o deshace una experiencia de lectura. Si un sitio fuerza una tipografía fina y de bajo contraste, puedes anularla. Una sola regla CSS de JustZix cambia cada fuente de la página por una que realmente disfrutes.

Forzar una fuente del sistema en todas partes

El cambio más simple y rápido usa la pila de fuentes del sistema operativo. Carga al instante porque no se descarga nada, y se ve nativa en todas las plataformas.

*, *::before, *::after {
  font-family: -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

El selector universal es deliberado. Los sitios aplican fuentes a docenas de elementos, e intentar atrapar cada uno individualmente es un juego perdido. Anula todo y luego haz excepciones.

Mantén el código en monoespaciada

Tras la anulación general de arriba, los bloques de código pierden su fuente monoespaciada. Restáurala para que los fragmentos sigan alineados.

code, pre, kbd, samp, tt,
.hljs, [class*="language-"] {
  font-family: "JetBrains Mono", "Fira Code",
    Consolas, "SF Mono", Menlo, monospace !important;
}

Usa una fuente web personalizada

¿Quieres algo más distintivo? Trae una fuente con @font-face desde un CDN y luego aplícala. Esto carga Inter, una sans-serif limpia y muy legible.

@font-face {
  font-family: "Inter Web";
  src: url("https://rsms.me/inter/font-files/Inter-Regular.woff2")
    format("woff2");
  font-weight: 400;
  font-display: swap;
}
body, p, div, span, li, a, h1, h2, h3, h4 {
  font-family: "Inter Web", sans-serif !important;
}

Como JustZix inyecta este CSS en la página, la regla @font-face funciona igual que si el autor del sitio la hubiera escrito. Elige cualquier URL WOFF2 en la que confíes.

Mejora la legibilidad ya que estás aquí

Cambiar la tipografía es un buen momento para arreglar el grosor y el renderizado. Muchos sitios fijan el texto del cuerpo demasiado fino.

body {
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 {
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

Una opción amable con la dislexia

Si las fuentes estándar son difíciles de leer, cambia a una tipografía diseñada para ello y afloja el espaciado.

* {
  font-family: "Atkinson Hyperlegible", Verdana, sans-serif !important;
  letter-spacing: 0.02em !important;
  word-spacing: 0.08em !important;
}

Cosas a vigilar

• Vuelve a declarar siempre la monoespaciada para el código, o los fragmentos quedarán desalineados.
• Usa font-display: swap para que el texto nunca desaparezca mientras carga una fuente web.
• Prueba las fuentes de iconos — algunos sitios renderizan iconos mediante una familia de fuentes, y la regla general puede ocultarlos. Excluye sus selectores.
• Mantén una pila de fuentes guardada para poder reutilizarla en todas las reglas.

A continuación, ajusta el tamaño y el espaciado en nuestra guía de lectura cómoda. Consigue más fragmentos en los ejemplos listos para usar, o descarga JustZix si lo estás configurando por primera vez.