Las Web Fonts nos permiten utilizar cientos de tipos de letra de calidad y optimizadas para la web. Aprende cómo utilizarlas en Bootstrap

WEB FONTS – BOOTSTRAP 3

¿Por qué usar web fonts?

Hasta hace solo algunos años el diseño web se limitaba a aquellas fuentes que vienen instaladas por defecto en casi todos los computadores, fuentes como: times new roman, verdana, arial, entre otras. Con el tiempo esto se convirtió en una limitación debido a que la tipografía puede marcar la diferencia en nuestros diseños.

Tratar de ser creativos e incluir nuevas fuentes a nuestros diseños siempre genera más de un dolor de cabeza porque si el usuario no tiene la fuente instalada en su computador, el navegador la sustituye por otra y la web termina teniendo un aspecto diferente al diseño inicial.

Podemos hacer uso de la regla @font-face para asegurar que nuestras fuentes sean compatibles con todos los navegadores modernos, de esta manera se descarga automáticamente la fuente, del mismo modo que  las imágenes y el resto de los elementos de la web.

¿Qué opciones tenemos cuando de web fonts se trata?

Google Fonts

Todas las fuentes del Google fonts  son de código abierto. Esto significa que son de libre uso, independientemente de si estás trabajando en un proyecto privado o comercial.

Font Squirrel

Colección de fuentes no solo para desarrollos web. Archivos de descarga disponibles en determinados formatos.

¿Cómo usar web fonts en bootstrap?

Mostraremos dos formas de usar nuestras web fonts

Usando la url y css

Paso 1:

El primer paso es buscar la fuente que necesitaremos, en éste caso mostraremos la fuente Pacifico.

Paso 2:

Una vez seleccionada la fuente de Google Fonts copiaremos el link ya que más adelante la necesitaremos.

Paso 3:

Una vez seleccionada la tipografía, debes ir al código html de tu proyecto e incluir el enlace que tomamos anteriormente en la etiqueta head justo antes de los css.

Paso 4:

A continuación iremos a nuestro archivo css y usaremos la fuente como lo haríamos normalmente. Solo debemos asegurarnos de escribir correctamente el nombre de nuestra fuente, considerando mayúsculas y minúsculas.

Usando solo css

Paso 1:

El primer paso es buscar la fuente que necesitaremos, en este caso mostraremos la fuente Pacifico, seleccionada de Google Fonts. 

Paso 2:

Pegaremos el enlace copiado anteriormente en una nueva pestaña para ver la información de la fuente, como se muestra en la siguiente imágen, y a continuación copiaremos toda la etiqueta @Font-face.

Paso 3:

A continuación iremos a nuestro archivo css y usaremos la fuente como lo haríamos normalmente. Pegamos la etiqueta @font-face, ya que ésta contiene los estilos, el nombre de nuestra fuente, el formato y la dirección de donde se descargará. Luego de esto ya estamos listos paa usar nuestra fuente.