Solución: Problema con las Fuentes o Letras en IE con CSS

IE (Internet Explorer) tiene dentro de su configuración varios aspectos que no son del gusto de todos, y allí entran los diseñadores y los administradores de blogs o sitios web al momento de querer cambiar el tipo de letra de cualquier etiqueta o parte de sus Webs. Por lo general hacer el cambio de letra para que cualquier parte del sitio se vea más llamativo es bastante fácil; El problema surge cuando esta nueva letra se ve en todos los navegadores, menos en Internet Explorer, que es el que por lo general causa inconvenientes.

convertir fuente ttf en eot Solución: Problema con las Fuentes o Letras en IE con CSS

Esto se debe a que la mayoría de las letras tienen el formato .TTF (TrueType Font) que no es soportado por IE, por lo tanto debemos usar otro tipo de fuente que son las que llevan el formato .EOT (Embedded OpenType) el cual es un poco primitivo. La idea al querer cambiar de fuente es darle un aspecto diferente y más llamativo al sitio que se esté arreglando, por lo que desistir y dejar los tipos comunes de letras no debe ser una opción.

Lo que se debe hacer es convertir el formato de la fuente TTF a EOT y usar ambos tipos mediante la propiedad @FontFace en el archivo de style.css. Por lo general solo existe un archivo, pero hay veces se hace necesario usar uno alternativo únicamente para usarse con IE. Sin embargo, en el procedimiento que detallaré a continuación basta con un solo archivo de estilos y todo quedará resuelto.

Cómo convertir la fuente a .EOT

Para la conversión de la fuente, se usará un servicio bastante bueno llamado @font-face Kit Generator que está online, donde lo único que hay que hacer es subir la fuente .ttf (…u otro formato diferente…), y el servicio nos devolverá un .rar con varios archivos, que no son más que la misma fuente en varios formatos, y de una vez devuelve el código CSS que hay que usar en el style.css para lograr que en todos los navegadores la letra se vea igual.

como convertir una fuente ttf a eot Solución: Problema con las Fuentes o Letras en IE con CSSEn el Botón Add Fonts, se pedirá el archivo con la fuente para subirlo al servicio. Hay tres tipos de configuraciones para la conversión de las fuentes, si eres un experto en el tema puedes usar la opción de EXPERT para configurar mejor el procedimiento. Luego de algunos segundos la descarga estará lista y basta con dar clic en:

covnertir tipos de fuentes para IE Solución: Problema con las Fuentes o Letras en IE con CSS

Ahora lo que hay que hacer es descomprimir el archivo descargado en una carpeta de tu PC, seleccionar los archivos que contienen las fuentes en los formatos que han sido convertidos y subirlos a tu sitio por medio de un cliente FTP o por el panel de administración. Luego abre el archivo que está también dentro del .rar llamado stylesheet.css y allí encontrarás un código que no es muy difícil de entender. Debes hacer los ajustes necesarios en la parte de src: url(………) ya que aquí va la dirección a donde fueron subidas cada una de las letras. Sigue este tutorial para entender mejor lo anterior.

Al tener este archivo listo, copia y pega el contenido dentro de tu archivo de estilos CSS, guarda los cambios y prueba el resultado en los diferentes navegadores.

Este es todo el procedimiento que hay que hacer. Si tienen problemas o dudas, no dejen de hacerlas en la sección de comentarios o ingresando al Foro.

Puedes seguir los comentarios de esta entrada a través de RSS 2.0 Usted puede dejar un comentario, o trackback.

Acerda de Juan Sebastián

Ingeniero de Sistemas y Telecomunicaciones de la Universidad de Manizales (Colombia) con énfasis en Redes y Seguridad Informática. Creador y administrador de ComuSOFT.com y apasionado del mundo de las redes de telecomunicaciones, el Software libre, Linux y la Seguridad de la Información. Actualmente me desempeño como Help Desk Engineer en una importante Multinacional de Seguridad Informática en Latino América. En lo que pueda colaborarte, lo haré con gusto!
Escribe un Comentario

2 Respuestas

Escribe un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>