on marzo 10, 2025

COMPARTE ESTE ARTÍCULO

Si estás buscando modernizar la apariencia de tu sitio de WordPress, la fuente Roboto es una excelente opción. Desarrollada por Google, Roboto destaca por su lectura clara y estética limpia, lo que la convierte en una de las tipografías más populares en el entorno web. A continuación, te explico cómo declararla correctamente en CSS, por qué se utiliza una hoja de estilo externa y por qué no se incluye por defecto en los navegadores web.

¿Qué es Roboto y por qué usarla?

Roboto es una tipografía sans-serif diseñada por Google y lanzada en 2011. Se hizo muy conocida gracias a Android y al ecosistema de Google, pero su versatilidad la ha posicionado como una de las preferidas para multitud de proyectos, desde blogs hasta plataformas de comercio electrónico.

Ventajas clave de utilizar Roboto:

Legibilidad: Su espaciado y trazado la hacen muy cómoda de leer en pantalla.
Variedad de estilos y grosores: Cuenta con múltiples pesos (Light, Regular, Medium, Bold, etc.) y opciones de estilo (Itálica, Negrita, etc.).
Disponibilidad gratuita: Puede importarse rápidamente desde Google Fonts o, si se desea, se puede alojar en el propio servidor.

¿Por qué no viene por defecto en los navegadores?

Los navegadores web suelen incluir únicamente un conjunto de fuentes genéricas y de sistema para asegurar compatibilidad y rapidez de carga inicial. Por tanto, fuentes externas como Roboto no están instaladas de manera nativa. Para usarlas, debemos importarlas o referenciarlas explícitamente en nuestro proyecto.

Cómo declarar Roboto en CSS

Existen principalmente dos formas de declarar la fuente en tu archivo CSS al trabajar con WordPress:

1. Importar desde Google Fonts

En la sección <head> de tu tema o de tu archivo de cabecera de WordPress (generalmente header.php), añade la siguiente línea:

<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

En tu hoja de estilo (por ejemplo, en style.css de tu tema hijo o en un bloque de CSS adicional dentro del personalizador de WordPress), declara la fuente:

body {
    font-family: 'Roboto', sans-serif;
}

2. Alojamiento de la fuente en tu servidor

Si prefieres no depender de Google Fonts y quieres hospedar la tipografía directamente en tu servidor (opción útil para sitios con políticas de privacidad estrictas o sin conexión a internet estable), debes:

Descargar los archivos de Roboto desde Google Fonts (archivo .zip) – (En un entorno de WordPress real, se puede descargar manualmente, pero también hay plugins que facilitan este proceso.)
Subir los archivos .woff o .woff2 (recomendables para uso web) a tu carpeta de tema o a una carpeta de fuentes específica.
En tu archivo CSS, usar la regla @font-face:

@font-face {
    font-family: 'Roboto';
    src: url('ruta-a-tu-carpeta/Roboto.woff2') format('woff2'),
         url('ruta-a-tu-carpeta/Roboto.woff') format('woff');
    font-weight: 400; /* Regular */
    font-style: normal;
}

Finalmente, aplicar la fuente a los elementos deseados:

body {
    font-family: 'Roboto', sans-serif;
}

¿Por qué se usa una hoja de estilo externa?

En WordPress y en cualquier proyecto web, existen varias razones para mantener las reglas CSS en archivos externos:

Orden y mantenibilidad: Al separar HTML, CSS y JavaScript, el código resulta más fácil de leer y mantener.
Rendimiento: Los archivos CSS externos pueden ser almacenados en caché por el navegador, acelerando la carga en visitas posteriores.
Reusabilidad: Es posible utilizar la misma hoja de estilo en múltiples páginas sin repetir código en cada archivo HTML o PHP.

Si bien se pueden añadir estilos en línea o en el propio HTML, esto va en contra de las buenas prácticas y hace que, a largo plazo, el proyecto sea más difícil de gestionar.

Conclusión

La fuente Roboto es una excelente elección para darle un aspecto moderno y profesional a tu sitio de WordPress. No viene instalada por defecto en los navegadores debido a que solo incluyen tipografías genéricas, por lo que necesitamos importarla externamente, ya sea desde Google Fonts o alojándola en nuestro propio servidor. Además, es recomendable manejar todos estos estilos en una hoja de estilo externa para garantizar organización, buen rendimiento y facilidad de mantenimiento.

¡Anímate a probar Roboto en tu blog y verás cómo mejora la experiencia de lectura de tus usuarios!

Photo by Pavel Danilyuk on Pexels.com
Photo by RealToughCandy.com on Pexels.com
Photo by Andrea Piacquadio on Pexels.com

¿QUÉ TE HA PARECIDO EL ARTÍCULO? Danos tu opinión al final de la página.
Deja tu comentario y ayúdanos a crecer.

¡SÍGUENOS EN TUS REDES FAVORITAS!
AYUDANOS A CRECER Y QUE LLEGUEMOS A TODAS LAS PERSONAS QUE NOS NECESITANA. SÍGUENOS EN TUS REDES.
Entra AQUÍ y elíge donde seguirnos.