problemas con @font-face

[MindPaniC]

Hola amigos,

He ido creando una web en local, para ello he usado la propiedad @font-face para crear un menu con una fuente que me gusta (hatten.ttf). en local todo funciona a la perfeccion la fuente se ve perfecta (uso la ultima versión de Firefox como navegador). ahora bien he subido mi web a un servidor para hacer pruebas con el formulario de contacto y cual es mi sorpresa que la fuente no funciona, me muestra una por defecto y me chafa el diseño. Utilizo la última versión de firefox.

El aspecto en el server de pruebas es este:
http://bi.loslocostambientienenblog.com/staff.html

como veis el menu queda hecho una mierda.

Este es el CSS:

Código HTML:

@font-face {
    font-family:hatten;
    src: url(fuentes/hatten.ttf) format('truetype');;
	src: url(fuentes/hatten.otf) format('opentype');;
    font-weight:normal;
}

He probado a cambiar la fuente de formato y subirla tambien, pero nada, no funciona.

¿Qué hago chicos? ¿cómo lo puedo solucionar?

[MindPaniC]

SOLUCIONADO

No se si era por el fallo de los puntos y coma que sobraban, pero los he quitado tambien he quitado la fuente otf y ahora me funciona perfecto.

La cuestion es funcionara en el Explorer???? proxima aventura....

[ArturoGallegos]

si quieres que se vea en todos los navegadores te faltan cosas, el código correcto es

Código CSS:

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

[MindPaniC]

Me podrias explicar mas detalladamente esa linea tan larga de código?

Saludos y gracias.

[ArturoGallegos]

yo lo puse en una linea pero pueden ser varias, en esa linea mando a llamar a los archivos de cada tipo de fuente (eot, woff, ttf, svg), cada navegador requiere la fuente en un formato distinto por lo que es necesario cargar varios archivos, yo utilizo ese formato que es el que me ha dado resultado en todos los navegadores, hubo un tiempo en que se necesitaba declarar el eot dos veces aunque actualmente ya no he visto que se requiera.

para una explicación mas detallada visita este link
http://www.cristalab.com/tutoriales/...face-c102677l/

si no tienes los archivos de tu fuente en sus distintos formatos puedes usar el generador de http://fontsquirrel.com/

yo suelo utilizarlo para crear las fuentes y utilizo mi propio código css

[MindPaniC]

Muchas gracias me ha funcionado, he utilizado el css que genera la propia web.

Saludos

[MindPaniC]

Noooooooooooooooo!!!!!

no me funciona en el Explorer, este es mi codigo:

Código CSS:

@font-face {
    font-family: 'haettenschweilerregular';
    src: url('fuentes/hatten-webfont.eot');
    src: url('fuentes/hatten-webfont.eot?#iefix') format('embedded-opentype'),
         url('fuentes/hatten-webfont.woff') format('woff'),
         url('fuentes/hatten-webfont.ttf') format('truetype'),
         url('fuentes/hatten-webfont.svg#haettenschweilerregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
 

[MindPaniC]

jajajajjajjaajaja joder que inutil soy, subi el css pero no las fuentes.

AHORA SI ME FUNCIONA!!!!

MUCHAS GRACIAS :)