Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar

Cómo utilizar fuentes externas y bonitas

Juan Diego Pérez Jiménez
  • Escrito por Juan Diego Pérez Jiménez el 19 de Febrero de 2019
  • 2 min de lectura | Desarrollo Web
Cómo utilizar fuentes externas y bonitas
El reproductor de video será cargado en breves instantes.

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.

Imagen 0 en Cómo utilizar fuentes externas y bonitas

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”

Imagen 1 en Cómo utilizar fuentes externas y bonitas

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;

Imagen 2 en Cómo utilizar fuentes externas y bonitasUna 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.

cursos-maquetacion-web-css

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

Relacionado

Te dejamos una selección de cursos, carreras y artículos

10 recursos gratuitos para diseño Web

10 recursos gratuitos para diseño Web

Desarrollo Web

17 de Junio de 2015

En Internet tenemos una gran cantidad de herramientas gratuitas que nos da todo tipo de soluciones y nos facilita nuestro trabajo. Hay muchas personas en contra del uso de este tipo de herramientas...

Frontend Developer Profesional

Frontend Developer Profesional

carrera

Incluye 8 cursos:

  • Curso de HTML5, CSS3 y JavaScript
  • Curso de React JS
  • Curso de Angular 6

y 5 cursos más!

Duración: 52 horas y 11 minutos

Curso de HTML5, CSS3 y JavaScript

Curso de HTML5, CSS3 y JavaScript

curso

Aprende lo básico para comenzar a programar sitios o aplicaciones web. En este curso verás HTML5, CSS3 y JavaScript básico.

Duración: 7 horas y 9 minutos

Estas son algunas de las empresas que ya confían en OpenWebinars

Profesores y profesionales

Nuestros docentes son profesionales que trabajan día a día en la materia que imparten

Conviértete en profesor de OpenWebinars