Cómo utilizar fuentes externas y bonitas

Problemas usando las fuentes por defecto

Al desarrollar páginas web nos encontramos con un problema al utilizar las fuentes, que por defecto utilizan los navegadores, ya que o bien resultan feas o bien son demasiado comunes, incluso pueden parecer feas por ser tan comunes.

Si queremos utilizar fuentes diferentes a las habituales, distintos tipos de letra, debemos asegurarnos que ese tipo de letra esté instalada en todos los navegadores de todos los usuarios, lo cual es bastante difícil.

Qué es y cómo utilizar Google Fonts

Ante esa situación hay diversas soluciones, pero la que vamos a explicaros es una que consiste en utilizar Google Fonts, una herramienta que Google pone a nuestra disposición de manera gratuita.

Para incluir en una página web fuentes más bonitas de Google Fonts básicamente hay que hacer dos cosas:

font-family: XXXXX, yyyyy;

• Añadir un enlace a una hoja de estilos en la cabecera de la página, con el nombre de la fuente que se quiera utilizar, de esta forma:

  link href=”https://fonts.googleapis.com/css?family=XXXXX” rel=”stylesheet”

• Colocar la propiedad font-family a los elementos donde queremos aplicar ese tipo de fuente:

Ejemplo de uso de Google Fonts

Como ejemplo vamos a elegir una fuente muy llamativa, ya que no tiene porqué ser bonita, y vamos a ver cómo se cambia y cómo queda en una página de prueba.

Accedemos a la web de Google Fonts a través de https://fonts.google.com . Una vez dentro elegimos un tipo de fuente, que en nuestro ejemplo es la que se denomina “Pacífico”. Pulsamos en el botón rojo con el símbolo + para seleccionarla.

Nos aparece en la parte inferior de la pantalla el mensaje “Family Selected”, clicamos sobre el mismo y se despliegan una serie de opciones. Seleccionamos el enlace que aparece en este desplegable, que es el siguiente:

link href=”https://fonts.googleapis.com/css?family=Pacifico” rel=”stylesheet”

Abrimos el archivo HTML de nuestra web y pegamos el código que hemos copiado previamente dentro de la zona del head.

Volvemos a la web de Google Apis y en la pantalla de la fuente elegida copiamos el segundo código que aparece para utilizar la fuente, que en este caso es el siguiente:

font-family: ‘Pacifico’, cursive;

Una vez copiado abrimos el archivo de estilos CSS que usamos en nuestra web, y pegamos el mismo dentro de los atributos de body, para aplicar ese tipo de fuente al mismo y a todos sus elementos hijos, ya que esa propiedad se propaga por los mismos.

Finalmente cargamos la página web y podemos observar que en la misma se está utilizando la fuente Pacifico de Google Fonts que habíamos elegido.

¿Quieres convertirte en desarrollador web profesional? Este curso de maquetación web es fundamental para comenzar a dominar las hojas de estilo CSS y sus aplicaciones, para que seas capaz de crear todo tipo de páginas web.

Recuerda que puedes comenzar este curso con tu suscripción de OpenWebinars. Si todavía no estás suscrito, aprovecha para hacerlo ahora.