Como ejemplo, vamos a ir a Google Fonts (https://fonts.google.com/) y vamos a descargar una fuente. En mi caso he optado por la Pacifico, una fuente de escritura a mano de uso libre. Cuando la hemos encontrado en esta web, pulsamos sobre el botón superior derecho que pone “Download family” y descargamos un .zip con la fuente
Una vez que tenemos el .zip, lo descomprimimos y se mete el archivo Pacifico-Regular.ttf sobre un directorio /fonts
A continuación creamos un archivo html para probar que la fuente.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Fuente</title>
<link rel="stylesheet" href="DI_U2_5Fonts.css">
</head>
<body>
<div id="fuente">
Texto con la fuente Pacifico
</div>
<div>
Texto sin la fuente Pacifico
</div>
</body>
</html>En la css ponemos el siguiente código para recuperar la fuente
@font-face {
font-family: Pacifico;
font-style: normal;
font-weight: 400;
src:
local("Pacifico"),
url("./fonts/Pacifico-Regular.ttf")
}
#fuente{
font-family: Pacifico;
font-size: 25px;
}