A la hora de elegir tipografía para una web nos encontramos con un montón de problemas, a parte de la elección de la más adecuada a su legibilidad y al estilo gráfico de la web, nos encontramos con el problema de… ¿cómo pongo esta tipo en la web?
Podemos elegir el sistema de google fonts, que es una forma muy sencilla de aplicar tipografías a la web, pero está el problema que tienes que conformarte con el catálogo, extenso, de sus tipografias.
Pero… ¿y si quiero poner una tipo concreta?
Para eso tenemos @font-face, un sencillo sistema que nos permite poner cualquier tipografía, de la que tengamos el archivo y la licencia, en la web.
con este sencillo código,
@font-face {
font-family: ‘futura’;
src: url(‘fonts/FuturaStd-CondensedBold.eot’);
src: local(‘☺’), url(‘fonts/FuturaStd-CondensedBold.woff’) format(‘woff’),
url(‘fonts/FuturaStd-CondensedBold.ttf’) format(‘truetype’), url(‘fonts/FuturaStd-CondensedBold.svg’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
Para adecuarlo a todos los navegadores y sistemas operativos, lo más recomendable es poner todas las versiones de la tipografía, .eot, .woff, .ttf y .svg .
font2web nos puede ayudar a conseguir los diferentes formatos para optimizar la visualización de la tiopografía.
Existen más sistemas para insertar tipografías en la web, como cufon, pero no son demasiado amigos del posicionamiento de google, por lo que es más recomendable el uso de google fonts. Si encontramos alguna similar ya pensamos todo el proyecto web con alguna tipografía de google fonts, o @font-face si ya tenemos una tipografia designada por la identidad gráfica.
Felices letras en la web!
