• Kitdigital
  • Conócenos
  • Ciberseguridad
info@doriagm.com +34935569500
logotipo doria global media DGM

AGENCIA DE MARKETING DIGITAL Y DISEÑO WEB

  • info@doriagm.com
  • +34935569500
  • 674270938
  • Ver en Google maps
    Calle Sicilia, 95, ático, 08013, Barcelona
  • Inicio (current)
  • Servicios
    Todos los Servicios Páginas web Tiendas online SEO (posicionamiento orgánico) SEM (google Adwords) Redes sociales Google My Business Email marketing
  • Proyectos
  • Conócenos
  • Nuestros medios
  • Blog
    Ver blog
    Previous Next
    mantenimiento web

    La importancia del mantenimiento web y por qué potenciarlo con SEO

    distribución de contenido

    5 motivos por los que destinar tu trabajo a la distribución de contenido

    Qué es PWA

    ¿Qué es PWA?: Progressive Web App para tu negocio online

    ¿Qué es AMP y cómo ayuda a mejorar el posicionamiento en Google?

    auditoría seo

    ¿Cómo hacer una auditoría SEO?: todo lo que debes saber

    crear un logo

    Crear un logo: 5 pasos imprescindibles que debes seguir

    Google Search Console

    ¿Cómo utilizar Google Search Console para nuestra estrategia SEO?

    aumentar la productividad

    5 consejos para aumentar la productividad y motivación en el trabajo

    acciones de branding online

    5 acciones de branding online para reforzar tu marca

  • Contacto
  • Buscador
  • Inicio
  • Páginas web
  • Tiendas Online
  • Publicidad online
  • Redes sociales
  • Blog
  • Contacto
674270938
+34935569500
info@doriagm.com
695 79 87 44

Cómo añadir y usar tipografías legibles en todos los navegadores para tu página web

Categoría: Diseño Web

Publicado el 07 Sep 2016 por globalwp

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:

  1. Incluir al principio de la hoja de estilo una regla-arroba @import.
  2. 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

  1. 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”>
  2. 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:

  • El uso de tipografías en diseño web, todo lo que hay que saber
  • Quiero conseguir una página web con un buen diseño. ¿Cómo lo hago?

¿Te gustó? Compártelo

¿Te interesaría contratar un equipo de Diseño Web?

Noticias relacionadas

Previous Next

¿Qué es y qué tipos de CMS existen?

Tendencias de diseño web para 2019: ¿cuáles son?

Cuándo pasar de web corporativa a tienda online

La importancia de tener un buen diseño web en tu negocio online

¿Cómo crear una web desde cero y qué debo saber?

Cómo crear un blog profesional

El formulario de contacto en tu web

Las mejores páginas para crear tu sitio web gratis

Empresa de diseño web: ¿cómo hacerla?

Servicios

servicio Páginas web

Páginas web

servicio Tiendas online

Tiendas online

servicio Redes sociales

Redes sociales

servicio SEO

SEO

servicio Google adwords

Google Adwords

servicio Estrategias

Estrategias

servicio Perfil de empresa en Google my Business

Perfil de empresa en Google

servicio Email marketing

Email marketing

servicio Diseño gráfico

Diseño gráfico

servicio Nuestros medios

Nuestros medios

Copyright © 2025. Diseñado por doria global media doriagm logotipo
Aviso legal | Política de privacidad | Política de cookies | Condiciones generales de contratación | Ley de Comercio Electrónico
logotipo doria global media DGM
Gestionar consentimiento
Para ofrecer las mejores experiencias, utilizamos tecnologías como las cookies para almacenar y/o acceder a la información del dispositivo. El consentimiento de estas tecnologías nos permitirá procesar datos como el comportamiento de navegación o las identificaciones únicas en este sitio. No consentir o retirar el consentimiento, puede afectar negativamente a ciertas características y funciones.
Funcional Siempre activo
El almacenamiento o acceso técnico es estrictamente necesario para el propósito legítimo de permitir el uso de un servicio específico explícitamente solicitado por el abonado o usuario, o con el único propósito de llevar a cabo la transmisión de una comunicación a través de una red de comunicaciones electrónicas.
Preferencias
El almacenamiento o acceso técnico es necesario para la finalidad legítima de almacenar preferencias no solicitadas por el abonado o usuario.
Estadísticas
El almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos. El almacenamiento o acceso técnico que se utiliza exclusivamente con fines estadísticos anónimos. Sin un requerimiento, el cumplimiento voluntario por parte de tu proveedor de servicios de Internet, o los registros adicionales de un tercero, la información almacenada o recuperada sólo para este propósito no se puede utilizar para identificarte.
Marketing
El almacenamiento o acceso técnico es necesario para crear perfiles de usuario para enviar publicidad, o para rastrear al usuario en una web o en varias web con fines de marketing similares.
Administrar opciones Gestionar los servicios Gestionar {vendor_count} proveedores Leer más sobre estos propósitos
Ver preferencias
{title} {title} {title}