Insertar fuentes para .IE no me funciona

[ceaped]

Buenos días para todos
Trato de insertar un tipo de fuente así:

Código CSS:

@font-face {
    font-family: "Klavika-Bold";
    src: url('../fuentes/Klavika-Bold.otf') format("opentype");
    src: url('../fuentes/klavika-bold-webfont.eot');
        font-weight: normal;
        font-style: normal;
}
 

Pero no me funciona para todos los navegadores, si quito esta línea que es la que me permite ver la fuente en IE:

Código CSS:

src: url('../fuentes/klavika-bold-webfont.eot');
 

Me funciona en los otros navegadores y si la dejo sólo en IE.
Que debo agregar para que me permita ver en todos los navegadores?

Gracias por su ayuda

[Adbane]

En el head del HTML, inserta este código, importante también con los comentarios:

Código HTML:

<!--[if IE]>
    <style type="text/css" media="screen">  
        @font-face {  
        font-family:'Klavika-Bold';  
        src: url('font-face/klavika-bold-webfont.eot');  
        }
    </style>  
<![endif]-->
 

<!--[if IE]--> detecta si se trata de Internet Explorer y ejecutará ese CSS. En la url he quitado los puntos suspensivos, porque tratandose del HTML, imagino que lo tendrás ubicado una carpeta atrás. Y si no voy mal encaminado... .eot es el formato para IE, así que por tu CSS deduzco que ya lo tienes, así que deberá funcionarte. O al menos eso espero xD

Importante que incluyan los comentarios if IE y endif

Y para el CSS, borra la linea del formato .eot y añade esta:

Código CSS:

src: url('../font-face/klavika-bold-webfont.eot?#iefix') format('embedded-opentype');
 

Esto último no estoy seguro, yo es que en mi página web por un lado utilizo el if IE, y por otro lado tengo una fuente en formato .eot, .woff, .ttf y .svg.

Con el mismo código en el HTML, añado en el CSS:

Código CSS:

@font-face {
    font-family: 'AgencyFB';
    src: url('font-face/AGENCYR.eot');
    src: url('font-face/AGENCYR.eot?#iefix') format('embedded-opentype'),
         url('font-face/AGENCYR.woff') format('woff'),
         url('font-face/AGENCYR.ttf') format('truetype'),
         url('font-face/AGENCYR.svg#AgencyFBRegular') format('svg');
}
 

Y me va de las mil maravillas en todos los navegadores, incluso en teléfonos móviles xD Por otro lado, para conseguir todos los formatos de una fuente, recuerdo que lo hice a través de una página web que te creaba los formatos a partir del archivo .ttf, el problema es que no recuerdo dónde lo hice, sorry, pero si vas a googlear, buscalo en inglés xD

Ya me dirás como te a ido :)

EDIT: No logro recordar el sitio, mi historial tampoco xD Pero algo puedo asegurar, es que el lugar que me creó las fuentes, te genera también el font-face con todos los formatos.

[ceaped]

Hola Adbane
Nada que me funciona. Así lo puse, en el HTML en el head:

Código CSS:

<!--[if IE]>
<style type="text/css" media="screen"> *
    @font-face { *
    font-family:'Klavika-Bold';
    src: url('../fuentes/klavika-bold-webfont.eot?#iefix') format('embedded-opentype');
* * }
</style> *
<![endif]-->
 

Pero no me funciona para IE

Gracias por tu ayuda

[ArturoGallegos]

Prueba con este otro metodo para insertarlo, a mi siempre me ha funcionado en todos los navegadores.

Código CSS:

@font-face {
    font-family: 'Klavika-Bold';
    src: url('../fuentes/Klavika-Bold.eot');
    src: local('?'), url('../fuentes/Klavika-Bold.woff') format('woff'), url('../fuentes/Klavika-Bold.ttf') format('truetype'), url('../fuentes/Klavika-Bold.svg#webfontgavbyt9w') format('svg');
    font-weight: normal;
    font-style: normal;
}
 

Asegurate que la url de la fuente es correcta y que se encuentren todos los archivos necesarios, cuando la uses en algun estilo asegurate de incluir las comillas... por ejemplo:

Código CSS:

body{font:20px 'Klavika-Bold',arial,verdana;}
 

[ceaped]

Hola Ag666
Nada. Así tengo mis estilos:

Código CSS:

@font-face {
    font-family: "Klavika-Bold";
    src: url('../fuentes/Klavika-Bold.otf') format("opentype");
    font-weight: normal;
    font-style: normal;
}
 

Código CSS:

h5{
    font-family: 'Klavika-Bold';
    color: #FFFFFF;
    font-size:25px;
    font-weight:normal; /* Internet Explorer */
    text-decoration: none;
    vertical-align: middle;
    line-height: 40px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    text-transform: none;
}
 

De esta manera se ve en todos los navegadores menos en IE.

Gracias por su ayuda

[Adbane]

Iniciado por ceaped

Hola Adbane
Nada que me funciona. Así lo puse, en el HTML en el head:

Código CSS:

<!--[if IE]>
<style type="text/css" media="screen"> *
    @font-face { *
    font-family:'Klavika-Bold';
    src: url('../fuentes/klavika-bold-webfont.eot?#iefix') format('embedded-opentype');
* * }
</style> *
<![endif]-->
 

Pero no me funciona para IE

Gracias por tu ayuda

Si te fijas, has puesto en varias partes del código los " * ", la estrellita esa que no sé como se llama xD Por otro lado, piensa que estas en el HTML, desconozco la estructura de tu página, pero si la ruta hacia la fuente desde el HTML es otra, asegurate de que esté bien.

Por lógica imagino que lo tendrias estructurado asi:

- index.html
- css/
-> estilos.css
- fuentes/
-> klavika-bold-webfont.eot

Si no me equivoco, entonces la ruta correcta desde el HTML es así:
"fuentes/klavika-bold-webfont.eot?#iefix", en todo caso puede que me equivoque, no sé como lo tienes estructurado xD

Piensa, y importante esto, que no todos los navegadores reconocen los mismos tipos de fuente, IE solo reconoce (creo) las fuentes .eot, Safari creo que también solo reconoce un solo tipo de fuente, el resto de navegadores son casi globales. Te aconsejo que tengas la misma fuente en todos los formatos, y utilices el mismo CSS que te puse yo de ejemplo con la fuente "Agency FB", y de paso el [if IE] usa exactamente el mismo que te he puesto, poniendo tu fuente, el "#iefix" no lo emplees en el [if IE], solo desde el CSS, más que nada porque es así como lo tengo yo y me va perfecto.

http://www.cssblog.es/font-face-inserta-cualquier-tipografia-en-tu-sitio-web/

Mira esta página, no estoy seguro, pero creo que subiendo la fuente TTF, te genera el resto de fuentes, y te crea el font-face necesario. El [if IE] tendrás que usar el mismo que te puse de ejemplo
http://www.fontsquirrel.com/fontface/generator"]http://www.fontsquirrel.com/fontface/generator

[ceaped]

Hola Adbane
Voy a probar con calma.

Muchas gracias por tu ayuda

[ArturoGallegos]

como ya te comento @Adbane debes revisar a fondo tu codigo de preferencia validarlo para asegurarte que no tengas errores, incluye todas las fuentes y asegurate que la ruta sea correcta.

Con el CSS que te di funciona correctamente e incluso te paso un link para que lo veas funcionando.
bit.ly/O95JR7
probado en FF, SF, Opera, Chrome, IE7-9

[ceaped]

Hola Ag666
Gracias por tu ayuda.