Cómo añadir y usar tipografías legibles en todos los navegadores para tu página web
Categoría: Diseño Web
Una de las grandes ventajas de Internet es la movilidad, poder acceder a la información desde cualquier lugar. Desde que se popularizó el uso de tablets y smartphones, a los navegadores utilizados en los ordenadores personales se sumaron los navegadores especialmente diseñados para los dispositivos móviles.
Esto, que tiene una indudable ventaja para los usuarios de la Red, puede suponer un inconveniente para el diseño web, que ahora se debe abordar de forma que el texto de las páginas se visualice correctamente en todos los dispositivos. No hay que olvidar que la tipografía es la base del diseño y tiene un gran impacto tanto en la legibilidad como en la experiencia general del usuario.
CÓMO AFRONTAR LAS TIPOGRAFÍAS EN EL DISEÑO WEB
Afortunadamente, los diseñadores web cuenta con herramientas para que la legibilidad no sea un problema. Una de ellas es Google Fonts, que pone a nuestra disposición más de 600 tipos de letra totalmente gratis y optimizadas para su uso web. Así, es muy sencillo elegir la fuente más apropiada para cada sitio y darle un toque único y personal.
La documentación oficial de Google Fonts propone dos métodos equivalentes:
- Incluir al principio de la hoja de estilo una regla-arroba @import.
- Incluir en el documento html un enlace como si fuera un enlace a una hoja de estilo.
Como ves, tan solo hay que realizar unos pequeños cambios en el documento HTML y en la hoja de estilos para aplicar las fuentes en la creación de páginas web.
CÓMO INTRODUCIR LAS LETRAS DE GOOGLE FONTS EN EL DISEÑO WEB DE NUESTRA PÁGINA
- Introduce en el encabezado del documento HTML la siguiente línea entre las etiquetas <head></head>:
<link rel=”stylesheet” type=”text/css” href=”https://fonts.googleapis.com/css?family=nombre de la fuente”> - Especifica en la hoja de estilos el tipo de letra que quieres usar:
<style> body { font-family: ‘nombre de la fuente’; } </style>
El documento quedará como sigue:
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”https://fonts.googleapis.com/css?family=nombre de la fuente”>
<style>
body {
font-family: ‘nombre de la fuente’, serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>Usando una fuente tipográfica de Google Fonts</div>
</body>
</html>
Es importante tener en cuenta lo siguiente:
El elemento <link> crea un enlace con el sitio que va a proporcionar la fuente. Para que funcione se debe insertar en el encabezado del documento HTML, entre las etiquetas <head></head>.
Comprueba que escribes correctamente el nombre de la fuente, sin errores ortográficos.
La hoja de estilos debe de asignar la fuente al elemento donde la quieras usar.
Lo interesante de Google Fonts es que las fuentes se puede usar sin alojarlas en nuestro servidor, lo que aligera la carga. El inconveniente es que pueden dejar de estar disponibles en un momento dado. Para evitar este problema debemos indicar varias fuentes y poner en último lugar una de las familias predefinidas.
Si no sabes cómo hacer estos cambios contacta con Global CC, empresa de creación de páginas webs, ellos se encargarán de elegir la o las letras que mejor se adapten al diseño de tu páginas web y eligirán la tipografía personalizada que mejor refleje el espíritu de tu web.
Artículos Relacionados:
¿Te interesaría contratar un equipo de Diseño Web?
