Formatos de fuente con HTML y CSS

 

UTILIZAR FORMATOS DE FUENTES CON HTML Y CSS

Los textos son la base de la mayoría de sitios web ya que lo más normal es transmitir la información mediante letras. Por este motivo, debemos prestar mucha atención en hacer una correcta elección de fuentes para nuestro sitio web.

Inicialmente, se utilizaban las fuentes típicas que los usuarios tenían instaladas en sus dispositivos. Actualmente, gracias a que los navegadores soportan la directiva @font-face, es posible utilizar casi cualquier tipo de tipografía sin necesidad de que esté instalada en el dispositivo.

Hoy en día es muy común utilizar un repositorio de fuentes que nos provea de los archivos necesarios para tener las fuentes disponibles en nuestra web.  

Uno de los repositorios proveedores de tipografías más  utilizados es Google Fonts (fonts.google.com). Los motivos de su uso son los siguientes:

• Gratuito: dispone de un amplio catálogo de fuentes gratuitas.
• Cómodo: su interfaz es de fácil uso.
• Rápido: utiliza un CDN que proporciona ventajas en cuanto a la velocidad.

UTILIZAR GOOGLE FONTS EN NUESTRAS PÁGINAS WEB

PASO 1: EL HTML

Lo primero que se necesita es un código HTML al cual aplicar la fuente. En este caso, utilizaremos este ejemplo que se ha elaborado previamente:

Visualización: 

Código fuente: 

(Si no lo tienes, ¡Prográmalo!)

PASO 2: ELEGIR LA FUENTE

Acceder a la página web de Google fonts (https://fonts.google.com/) y elegir la fuente que deseamos incrustar. 

En este ejemplo de utilizará la fuente "Courgette" (para tu ejercicio, utiliza la que mas te guste)

Al seleccionar la fuente, la página abrirá una segunda sección para conocer los detalles de la misma. Si confirmamos que esta es la fuente que deseamos, tenemos dos posibles opciones: 

• Descargarla para instalarla y utilizarla en la computadora.
• Seleccionar esta fuente para "anclarla" a nuestro código HTML y CSS.

Para este ejemplo, seleccionamos la segunda opción: 

Al presionar la opcion "Select this style" deberá aparecer la siguiente ventana: 

En caso de que no aparezca, hacer clic sobre el icono "mostrar tus fuentes seleccionadas". 

 

PASO 3: INSERTAR LA FUENTE EN EL HTML Y CSS

A través de esta ventana es como podemos utilizar la fuente en nuestro proyecto web:

Agregar la línea de código al HTML:

Especificar las propiedades CSS para el elemento deseado:

Esta, como cualquier código CSS, puede agregarse de varias formas diferentes. Aquí vamos a agregarla como un archivo de estilos independiente:

Le asignamos la fuente a los títulos <h1>(por ejemplo):

Actualizamos la página HTML y... ¡listo!:

Ahora inserta al menos otros 3 tipos de fuentes diferentes y asígnalos a los elementos HTML que tu desees.