@font-face: Como utilizar cualquier fuente/tipografía en tu web

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>@font-face: Como utilizar cualquier fuente/tipografía en tu web</title>
</head>
<body>

@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 400;
  src: local('Raleway Italic'), local('Raleway-Italic'), url(https://fonts.gstatic.com/s/raleway/v11/IIm-lPOtfVKQy0GMiczF_1tXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

@font-face {
  font-family: 'Bungee Inline';
  font-style: normal;
  font-weight: 400;
  src: local('Bungee Inline'), local('BungeeInline-Regular'), url(https://fonts.gstatic.com/s/bungeeinline/v2/Tb-1914q4rFpjT-F66PLCTxObtw73-qQgbr7Be51v5c.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

body {
  font-family: 'Raleway';
  front-style: normal;
  font-weight: 400;
  font-size: 100%;
  line-height: 1.5;
  background: #eee;
}

.container {
  width: 80%;
  margin: 1em auto;
  padding: 1em 5%;
  background: #fff;
}

h1, h2 {
  margin-bottom: .5em;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.6em;
}

p {
  margin-bottom: 1em;
}
	.rlw-italic {
    font-style: italic;
	}
	.bungee {
		font-family: 'Bungee Inline';
	}
</style>

<div class="container">
  <p>Este párrafo utiliza la fuente Raleway, estilo normal y peso 400, declarada definida en la primera regla font-face, ya que la hemos aplicado a todo body.</p>
  <p class="rlw-italic">Este párrafo utiliza la fuente Raleway, estilo italic, definida en la segunda regla font-face; hereda font-family, font-weight del body.</p>
  <p class="bungee">Este párrafo utiliza la fuente Bungee Inline definida en la tercera regla font-face.</p>
</div>

</body>
</html>