Vamos a ver cómo podemos incrustar texto con diversas fuentes en nuestra página web. Antes se usaban “fuentes seguras”, como Helvética, Arial, y en todo caso a lo mejor sans-serif:

font-family: arial, helvetica, sans-serif;

Ahora, con @font-face, podemos hacer que el navegador descargue esa fuente y la muestre correctamente. En primer lugar, podemos buscar fuentes gratuitas en dafont.com.

Una vez descargada la fuente, la declaramos en nuestro CSS con @font-face:

@font-face {
  font-family: 'Akronim';
    src: url('fonts/Akronim-Regular.eot'); /* Internet Explorer */
    src: local('Akronim'),
         url('fonts/Akronim-Regular.ttf') format('truetype'),
         url('fonts/Akronim-Regular.woff') format('woff'),
         url('fonts/Akronim-Regular.svg') format('svg')
}

p {
    font-family: 'Akronim', cursive;
    font-size:1.5em;
}

Incluimos el archivo de la fuente en el directorio fonts/ de nuestro proyecto e indicamos las rutas en la declaración @font-face. Se proporcionan varios formatos para garantizar compatibilidad con distintos navegadores: .eot para Internet Explorer, .ttf para TrueType, .woff y .svg.

Para aplicar la fuente a un elemento, simplemente usamos la propiedad font-family con el nombre que le hayamos dado:

font-family: 'Akronim';

¡Salud y coding!