Usando @font-face en Diseño Web

Uno de los más grandes errores al utilizar el selector @font-face de CSS3, es el uso de tipografías en formato OTF regular o TTF, en lugar de los formatos de fuente recomendadas WOFF (Web Open Font Format) y EOT (exportable OpenType ). Los formatos de fuentes tradicionales (TTF, OTF), son de uso, principalmente para imprenta.

Ahora, con la amplia adopción de @font-face, en diseño y desarrollado Web, no debe  ser una preocupación el navegador o motor de renderizado que utilice el visitante de una determinada pagina Web, y asegurarse de que cada fuente se muestra como debe ser. Esto, antes,  era un problema, la compatibilidad entre diferentes navegadores.

Hay que tenga en cuenta que no en todos los sitios Web se mostrarán las fuentes de la misma manera (cuando se esta hablando de TTF y OTF). Algunos navegadores mostrarán las tipografías  TTF y  OTF muy bien, mientras que otros les darán los bordes “dentados” y muy poco atractivos. A continuación se muestra un ejemplo de tipografía TTF vistos en Google Chrome.

incorrect-font-face

Como se puede ver, la tipografía se visualiza desenfocada y “dentada”, mostrando las imperfecciones, esto como resultado de solo utilizar TTF.

El código fuente de este ejemplo seria:

code1

A continuación hemos incluido no solo TTF, sino también EOT, WOFF, y la versión SVG de la misma fuente vista en Google Chrome.

correct-font-face

El código sería el siguiente:

code2

Al comparar las dos imágenes, incluso es difícil creer que se trata de la misma fuente. Ésta última imagen es clara, con bordes perfectamente mostrados, y se puede escalar a cualquier tamaño sin pérdida de calidad.

Ahora, la Solución

Si se tiene la fuente (tipografía) y su correspondiente licencia de uso o si se utiliza una tipografía “Free”, entonces hay varios recursos en línea que teniendo un único archivo de tipografia normal, nos lo convertirá y devolverá un paquete de fuentes Web con todos los formatos que se necesita para asegurar que se muestra correctamente en distintos navegadores. Estas son algunas:

@font-face kit generator

url: http://fontface.codeandmore.com/

font-face-generator

Font2Web

url: http://font2web.com/

font2web

online font converter

url: http://onlinefontconverter.com/

online_converder_fontr

Estos servicios nos sirven para la generación de fuentes compatibles con la Web, y sin duda se recomienda su uso (y si la licencia de la tipografía así lo permite), para asegurar que los diseños Web se vean bien en todos los navegadores.

Anuncios

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s