Usando Pictogramas con @font-face

Por: Fecha de publicación: Numero de comentarios: Sin comentarios.

pictograma Usando Pictogramas con @font face

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.

Diego Armando

Sigueme en Twitter: @anotherdagou

Apasionado de las nuevas tecnologías que surgen día a día en Internet. Me encanta todo aquello que tiene que ver con el diseño, la creación de interfaces web, redes sociales, y emprendimiento. Hobbies: videojuegos, cine, música, escribir etc. Sueño que mi trabajo sirva de inspiración para los demás.

407 Entradas escritas por: Diego Armando

Comparte este Post con tus amigos