@font-face sale correctamente en LocalHost pero una vez subido no se ve

[Distriker]

Buenas, ufff, cuanto tiempo hace que no me paso para escribir un post, uff, mucho pero que mucho tiempo, bueno, pido perdón el no haberme pasado , he estado bastante ocupado con proyectos y demás.

Bueno, os cuento mi problema. Resulta ser que estoy diseñando una plantilla Drupal, aunque publico esto aquí pensando que tiene que ver mas con CSS que con Drupal. En el diseño de esa plantilla estoy usando unas cuantas fuentes con @font-face. Mi código es el siguiente:

Código CSS:

@font-face {
font-family: Bienvill ;
src: url('fonts/bienvill.ttf') ;
}
 
@font-face {
font-family: "Steiner Light" ;
src: url('fonts/Steinerlight.ttf') ;
}
 
article h1 {
font-family: Bienvill ;
font-size: 40pt ;
margin-top: 0 ;
margin-bottom: 5px ;
}
 
article h2 {
font-family: Bienvill ;
font-size: 36pt ;
margin-top: 0 ;
margin-bottom: 5px ;
}
 

Bueno, no os pongo todo mi CSS por no hacer lios, aunque os comento que solo os pongo los h1 y 2 (que tienen enlaces) del <article> ya que el footer tampoco funciona y está igual, el título de menú también está igual, aunque aquí viene lo raro, los elementos de menú si tienen su respectiva fuente:

Código CSS:

aside a {
font-family: Steiner ;
font-size: 14pt ;
margin: 34px ;
}
 

Y lo mas raro ahora es que en el LocalHost se ve estupendo, en cambio, una vez subido, empieza a gritar, ¡por que es horroroso!

Saludos y gracias

[Zoidberglangosta]

tienes que ponerlas en otf y odt las fuentes, no en ttf

[Distriker]

Buenas Zoidber, gracias por su respuesta, aunque debo decirle, todo lo que he leido sobre @font-face, utiliza ttf. Además, no he encontrado fuentes OTF gratuitas.

Saludos

[Zoidberglangosta]

Si ahora estava mirando yo y eot + otf me funciona en firefox y chrome, opera pero no en IE. Y si hay muchas webs que pone ttf. Siento haberte confundido

[OmarV]

Si te sale bien en localhost y ya que lo subes te sale mal intenta poniendo la font con la url completa, para comprobar si el problema es allí.

[chulifo]

revisa este tema
http://css.devillasbuenas.es/font-face/index.html

espero que te sirva

[Distriker]

Iniciado por Zoidberglangosta

Si ahora estava mirando yo y eot + otf me funciona en firefox y chrome, opera pero no en IE. Y si hay muchas webs que pone ttf. Siento haberte confundido

No se preocupe, no pasa nada .

Iniciado por Chulifo

revisa este tema
http://css.devillasbuenas.es/font-face/index.html

espero que te sirva

Si, es uno de tantos artículos que he leido.

Iniciado por OmarV

Si te sale bien en localhost y ya que lo subes te sale mal intenta poniendo la font con la url completa, para comprobar si el problema es allí.

Gracias, aunque no era la URL, me he dado cuenta después de tantas veces y tanto tiempo observado, que había problemas con mayúsculas y minúsculas.

Siento haber publicado un tema para tal problema, que al final era una bobería. Soy muy despistado, espero que no me vuelva a pasar.

Saludos

[OmarV]

Iniciado por Distriker

No se preocupe, no pasa nada .
Gracias, aunque no era la URL, me he dado cuenta después de tantas veces y tanto tiempo observado, que había problemas con mayúsculas y minúsculas.

Siento haber publicado un tema para tal problema, que al final era una bobería. Soy muy despistado, espero que no me vuelva a pasar.

Saludos

Jaja a todos nos a pasada que por un error estupido nos matemos horas frente al computador para decirnos OH! ¿Sere tan tonto?

[pann84]

De todos modos yo te diría que pusieses las fuentes también en .otf pues es el formato que requiere explorer, y sino se te verá bien en todos los navegadores salvo este. No necesitas encontrarlas, hay conversores para tus fuentes que las pasan a .otf

[OmarV]

Iniciado por pann84

De todos modos yo te diría que pusieses las fuentes también en .otf pues es el formato que requiere explorer, y sino se te verá bien en todos los navegadores salvo este. No necesitas encontrarlas, hay conversores para tus fuentes que las pasan a .otf

¿Puedes recomendar algún lugar para convertir fuentes?

[luisfego]

Creo que lo más probable es que el servidor no esté sirviendo el MIMEType correctamente. Para corregir este problema, si usas un servidor Apache (con .htacces habilitado), lo que tienes que hacer es agregar este pedazo de código a tu archivo .htacces en la raíz de tu servidor.

Código:

# en caso de que la fuente esté alojada en un subdominio
<FilesMatch "\.(ttf|otf|eot|woff|font.css)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
 </IfModule>
</FilesMatch>

# para poder servir cualquier tipo de fuente

AddType application/vnd.ms-fontobject eot
AddType font/ttf                      ttf
AddType font/otf                      otf
AddType font/x-woff                   woff

[pann84]

Iniciado por OmarV

¿Puedes recomendar algún lugar para convertir fuentes?

Hace poco me pasaron una web bastante interesante que se ocupa de ello, échale un vistazo, está francamente bien:
http://www.fontsquirrel.com/fontface/generator

Tu subes la fuente por el método easy y ya se ocupa ella de hacerlo todo, te descargará una carpeta con varios archivos:
- Fuente .eot para explorer
- Fuente .ttf para el resto
- fuente .svg formato XML compatible con algunos navegadores incluyendo el iPhone y el IPAD
- fuente .woff es ligero y pueden ser compilado con o TrueType o PostScript, en la actualidad, con el apoyo de Firefox
- Archivo CSS para que sepas qué codigo y dónde meterlo y
- Archivo HTML con un ejemplo de aplicación de las fuentes

[jomaruro]

Hola:

Iniciado por OmarV

¿Puedes recomendar algún lugar para convertir fuentes?

Parece mentira lo que os cuesta leer un enlace recomendado para resolver una duda. Ya lo ha mencionado chulifo en el #6.

Iniciado por chulifo

revisa este tema
http://css.devillasbuenas.es/font-face/index.html

espero que te sirva

Saludos.