Cambiar fuentes a través de Google Font

Vamos a conocer un apartado muy interesante y es el cambio del tipo de letras de nuestro sitio web a través del sitio web https://fonts.google.com

Cambiar las fuentes en nuestro sitio web con Css es una tarea muy fácil. Contamos con dos opciones, la primera es llamar a la fuente a través de un enlace externo (enlace de Google) y la segunda es descargando el tipo de letra e instalarla en nuestro sitio web.

La primera opción (enlace), es rápido y fácil, el único inconveniente es que si por algún motivo Google llegará a eliminar el enlace tu fuente desaparecerá (cosa que veo poco probable)

¿Cómo lo hago?

Paso 1: Selecciona la fuente de https://fonts.google.com

Paso 2: Pega el link proporcionado por Google dentro de las etiquetas <head> de tu sitio web cómo en el siguiente ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Fuentes</title>
	<link rel="stylesheet" href="fuentes.css" type="text/css">
	
	<!-- Aquí está un enlace de ejemplo de un tipo de fuente de Google Font -->
	<link href="https://fonts.googleapis.com/css?family=Fjalla+One|Indie+Flower" rel="stylesheet"> 

</head>

Paso 3: Selecciona a quién le asignarás la fuente instalada, recuerda que el código Css también te lo proporciona Google Font. En el ejemplo se lo aplicaremos al <h1>

h1{
	font-family: 'Indie Flower', cursive;
}

Paso 4: listo!

La segunda opción (descargar) es un paso más largo pero te aseguras de que todo funcione al 100%.

Paso 1: Descarga la fuente de Google Font y copia el archivo descomprimido dentro de tu sitio web (puedes crear una carpeta llamada “fuentes” para agregar todas estas de forma ordenada)

Paso 2: En tu archivo Css, primero asigna un nombre a la nueva fuente (con la propidad “font-family: nombre-fuente (inventado si quieres)”) e indica donde está instalada (con “src: url(carpeta-de-la-fuente/archivo)” ). Todo esto ocupando la propiedad @font-face {}

@font-face{
	font-family: instalada;
	src: url(fuentes/Lobster-Regular.ttf);
}

Paso 3: Asigna la fuente a una sección de tu sitio web o etiqueta, por ejemplo a <p>

p{
	font-family: instalada;
}

En el video y en los ejemplos siguientes veras las dos opciones.

Html

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Fuentes</title>
	<link rel="stylesheet" href="fuentes.css" type="text/css">
	<!-- Aquí está un enlace de ejemplo de un tipo de fuente de Google Font -->
	<link href="https://fonts.googleapis.com/css?family=Fjalla+One|Indie+Flower" rel="stylesheet"> 
</head>
<body>
<div class="todo">
	<h1>Título del sitio web</h1>
	<h2>Descripción del sitio web</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora atque eius debitis sint eligendi quia nesciunt nisi. Doloremque non autem earum? Qui error aspernatur, fugit, est architecto voluptatibus delectus ipsum.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eveniet soluta excepturi facere laudantium, et inventore architecto amet ex, aperiam deleniti recusandae delectus, quis quidem doloribus consequuntur rem necessitatibus incidunt!</p>
</div>	
</body>
</html>

Css

h1{
	font-family: 'Indie Flower', cursive;
}
h2{
	font-family: 'Fjalla One', sans-serif;
}
@font-face{
	font-family: instalada;
	src: url(fuentes/Lobster-Regular.ttf);
}
p{
	font-family: instalada;
}