OpenWebinars

Diseño Web

Cómo utilizar fuentes externas y bonitas

Te mostramos cómo poder añadir de fuentes externas que hagan que tu web sea más atractiva visualmente.

Juan Diego Pérez Jiménez

Juan Diego Pérez Jiménez

Experto en desarrollo Web

Lectura 2 minutos

Publicado el 19 de febrero de 2019

Compartir

    Tabla de contenidos

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.

Compartir este post

También te puede interesar

Icono de la tecnología
Curso

HTML5 y CSS3

Intermedio
4 h. y 21 min.

Aprende desde cero a crear páginas Webs con este curso de HTML5 y CSS3. Crea paso a paso...

Juan Diego Pérez Jiménez
4.5
10 recursos gratuitos para diseño Web
Blog

10 recursos gratuitos para diseño Web

En Internet tenemos una gran cantidad de herramientas gratuitas que nos da todo tipo de soluciones y nos facilita nuestro trabajo. Hay...

Angel Robledano