En algunas entradas he platicado sobre @font-face, si aun no conoces esta propiedad de CSS te invito a darle un vistazo  << mientras tanto, yo te espero >>. Bien, una vez que ya sabes que es @font-face y sus alcances, hoy aprenderemos como usar pictogramas con @font-face. Su uso es prácticamente igual a usar cualquier fuente tipográfica.

A estas alturas tal vez te estés preguntando ¿que es un Pictograma?. Un pictograma es un símbolo que representa un objeto real, generalmente es utilizado para anuncios, la idea de un pictograma es que debe ser sencillo y fácil de relacionar con el objeto real que se desea representar.

Una vez tenemos ubicado de que se trata @font-face y que son los pictogramas lo único que nos queda es buscar un set de pictogramas adaptados para ser usados como fuente tipográfica (en internet hay muchas).

Por ejemplo podemos descargar esta fuente llamada Modern Pictograms. Una vez descargada la fuente tan solo tenemos que implementarla en nuestro archivo CSS.

@font-face {
    font-family: 'ModernPictogramsNormal';
    src: url('modernpics-webfont.eot');
    src: url('modernpics-webfont.eot?#iefix') format('embedded-opentype'),
         url('modernpics-webfont.woff') format('woff'),
         url('modernpics-webfont.ttf') format('truetype'),
         url('modernpics-webfont.svg#ModernPictogramsNormal') format('svg');
    font-weight: normal;
    font-style: normal;
}

Implementarlo es tan sencillo como aplicar la propiedad css font-family, como por ejemplo:

h1 {
 font-family: ModernPictogramsNormal;
}

El resto depende de ustedes. Aquí podemos ver un ejemplo más visual.