Fuentes en CSS – Tecnitium

CSS permite modificar el aspecto de las fuentes de nuestra web, lo hace a través de los siguientes atributos:

Font: permite definir las propiedades relacionadas con el tipo de letra: font-style, font-weight, font-family…
Font-family: define el tipo de letra del elemento: arial, verdana…
Font-size: Permite establecer el tamaño de la letra, puede ser en tamaño absoluto, relativo, porcentaje…
Font-style: Indica si la letra tendrá alguna decoración, como negrita, cursiva…
Font-variant: Este atributo transforma las letras a mayúsculas o viceversa.
Font-weight: Da la posibilidad de elegir el grosor del trazo.
Font-size-ajust: Permite establecer la proporción entre el tamaño del tipo y el de la letra.
Font-stretch: Permite elegir la expansión o convergencia de las letras.

Existe un tipo peculiar de fuente, en la que las letras están representadas por iconos, cada icono generalmente representa a una única letra.

Ejemplos de iconos: https://fontawesome.com/icons

CSS dispone de la regla @font-face para utilizar fuentes que no están instaladas en el equipo local.

Google fonts ofrece muchas tipografías diferentes para usar en nuestra web, podemos utilizarlas a través de un import que referencie su ubicación:

ej: @import url(https://fonts.googleapis.com/css?family=Mystery+Quest);

Ejemplo de importación de tipografías:

<!DOCTYPE html>

<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <link href="https://fonts.googleapis.com/css2?family=Festive&family=Rampart+One&display=swap" rel="stylesheet"> 
 
<style>
 @import url(https://fonts.googleapis.com/css?family=Mystery+Quest);
 @import url(https://fonts.googleapis.com/css2?family=Festive&display=swap );
 .mystery{
 font-family: "Mystery Quest", sans-serif;
 font-size:150%;
 }
 .festive{
 font-family: "Festive", sans-serif;
 }
 .rampart{
 font-family: 'Rampart One', cursive;
 }
 </style>

</head>

<body>
 <p class="mystery">Fuente de google docs Mystery Quest</p>
 <h1 class="festive">Fuente festive</h1>
 <h1 class="rampart">Fuente rampart?</h1>
</body>