Google Web Fonts: Cómo tener nuevas fonts en la Web

Cuando usas distintas fonts en el diseño de una página web, debes asegurarte que estas sean visibles para todos. Por esta razón, muchas personas se centran en usar solo Arial, Tahoma o Verdana, pero esto ya no es necesario, debido a que se ha creado Google Web Fonts, que permite usar distintos tipos de fuentes en Internet.

¿Qué es Google Web Fonts?

Google Web Fonts es una herramienta para que todos los diseñadores de páginas web o usuarios en general tengan acceso a distintas fonts. Es decir, no tiene importancia si algún visitante a tu página web no consta con la font que usaste, ya que esta font se cargará automáticamente a través de Google Web Fonts. Esto es muy útil, pero también es necesario resaltar que incrementa el tiempo de carga de tu página web, debido a que es un peso adicional.

Google Web Fonts: Cómo utilizar nuevas fonts de Internet fácilmente
Existen más de 600 fonts a elegir, así que ten por seguro que encontrarás el tipo de fuente que estás buscando. Puedes buscar las fonts seleccionando la palabra u oración que quieres que se vea, o la mejor opción, ver todas las fuentes tipo poster.


Cómo utilizar las Nuevas Fonts

Luego de encontrar la fuente que estes buscando, podrás agregarla a tu colección o podrás utilizarla de inmediato:
Cómo usar Google Web Fonts

  •  Para utilizar de inmediato, simplemente le daremos click a la font y le daremos click al ícono encerrado en rojo de la izquierda. Este es el botón de Quick-Use, el cual nos permite ver los códigos necesarios para usar la fuente. Google te da 4 rápidos pasos para comenzar a usar la fuente, y los más importantes son la implementación del código CSS y HTML.
  • Para utilizar más de una font en tu página web, una manera más rápida es ir agregando las fuentes a tu colección y luego en la parte de abajo derecha, darle click a Use. Asimismo, Google te brinda 4 pasos para implementar las fuentes en tu página web.

 
Es necesario resaltar que los códigos necesarios para la implementación son los siguientes:

  1. Link a un Recursos Externo:
    Este código indica qué fuentes están siendo descargadas para su uso, y desde dónde están siendo descargadas. (En este caso, las fuentes son: Denk One y Hanalei)

  2. Indicar Font:
    Además de descargar las fonts, es necesario indicar dónde se quiere usar las fuentes a través de CSS.

    font-family: 'Denk One', sans-serif;

De esta manera, es posible usar distintas y nuevas fonts en el diseño de páginas web. No se debe olvidar que a más fuentes descargadas, mayor es el tiempo de carga de las páginas web.


También te interesaría...

Suscríbete a nuestra lista de correo

Agregue un comentario

Su dirección de correo no se hará público. Los campos requeridos están marcados *


Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.