@font-face no funciona con iOS?

[sergi_multimedia]

Hola, estoy utilizando el atributo @font face de CSS3. En mi versión de escritorio de Chrome, Safari, Firefox y Opera la fuente sale correctamente.

Pero lo miro con el iPhone y el iPad y la fuente no es la que yo quiero.

Aquí teneis la web:

http://sergibeltran.com/jim3/#

Código CSS:

@font-face { 
    font-family: 'Old Century Regular';
    font-style: normal; 
    font-weight: normal;
    font-variant: normal;
    src: url(../fonts/oldcenturyregular.eot);
    src: url(../fonts/oldcenturyregular.svg) format('svg');
    src: url(../fonts/oldcenturyregular.ttf) format ("truetype"); 
}
 

Y por cierto...porqué desde Firefox siempre me sale la fuente mucho más negra y gorda?

Un saludo y gracias ;)

[pzin]

A Firefox le gustan negras y gordas.

Cada navegador renderiza de forma diferente las tipografías. Esas pequeñas (aunque realmente odiosas) diferencias son bastante normales.

En caso de que uses la fuente para algún encabezado, asegúrate de que ese encabezado esté sin negrita (h1 {font-weight:normal}). Con algunos navegadores móviles he tenido hace tiempo un problema así y resultó que así se solucionaba. Supongo que será porque esa fuente no incluía un estilo de negrita.

[emprear]

Iniciado por sergi_multimedia

Hola, estoy utilizando el atributo @font face de CSS3. En mi versión de escritorio de Chrome, Safari, Firefox y Opera la fuente sale correctamente.

Pero lo miro con el iPhone y el iPad y la fuente no es la que yo quiero.

Aquí teneis la web:

http://sergibeltran.com/jim3/#

Código CSS:

@font-face { 
    font-family: 'Old Century Regular';
    font-style: normal; 
    font-weight: normal;
    font-variant: normal;
    src: url(../fonts/oldcenturyregular.eot);
    src: url(../fonts/oldcenturyregular.svg) format('svg');
    src: url(../fonts/oldcenturyregular.ttf) format ("truetype"); 
}
 

Y por cierto...porqué desde Firefox siempre me sale la fuente mucho más negra y gorda?

Un saludo y gracias ;)

http://www.michaelcritz.com/2010/04/...r-ipad-iphone/
con respecto al renderizado, el siguiente ejemplo se aplica a la fuente arial black en Firefox, probablemente para otras fuentes suceda lo mismo
http://foros.emprear.com/css/arial_b...fuente_ff.html


Saludos

[sergi_multimedia]

Iniciado por Bonez

A Firefox le gustan negras y gordas.

Cada navegador renderiza de forma diferente las tipografías. Esas pequeñas (aunque realmente odiosas) diferencias son bastante normales.

En caso de que uses la fuente para algún encabezado, asegúrate de que ese encabezado esté sin negrita (h1 {font-weight:normal}). Con algunos navegadores móviles he tenido hace tiempo un problema así y resultó que así se solucionaba. Supongo que será porque esa fuente no incluía un estilo de negrita.

He puesto "font-weight: normal" y Firefox me la puesto sin la negrita, así que perfecto, un saludo y gracias por pasarte.

[sergi_multimedia]

Iniciado por emprear

http://www.michaelcritz.com/2010/04/...r-ipad-iphone/
con respecto al renderizado, el siguiente ejemplo se aplica a la fuente arial black en Firefox, probablemente para otras fuentes suceda lo mismo
http://foros.emprear.com/css/arial_b...fuente_ff.html


Saludos

Hola, sí, iOS utiliza el tipo de fuente SVG, yo ya la he especificado en mi @font-face, y la he subido al servidor. Entonces porqué no se visualiza?

Un saludo y gracias por pasarte.

[emprear]

Iniciado por sergi_multimedia

Hola, sí, iOS utiliza el tipo de fuente SVG, yo ya la he especificado en mi @font-face, y la he subido al servidor. Entonces porqué no se visualiza?

Un saludo y gracias por pasarte.

Lamentablemente no puedo verificarlo, pero si tu servidor usa apache, intentá forzar los siguientes mimetypes en .htaccess

Código Apache:

AddType image/svg+xml svg svgz
AddEncoding gzip svgz
AddType application/vnd.ms-fontobject  eot
AddType font/truetype ttf
AddType font/opentype otf
AddType application/x-font-woff woff
 

Saludos

[Tedel]

src: url(../fonts/oldcenturyregular.svg) format('svg');

Esa línea está errada. Necesitas agregarle el # con el nombre de la fuente.

[sergi_multimedia]

Iniciado por Tedel

Esa línea está errada. Necesitas agregarle el # con el nombre de la fuente.

Hola Tedel, no entiendo dónde tengo que poner el #, me podrías dar el ejemplo?

Saludos.

[Tedel]

Si no me falla la memoria, es así:

Código:

src: url(../fonts/fuente.svg#fuente) format('svg');

Verifica buscando sobre el método a prueba de balas para el @font-face. Hay varias páginas con ese dato.

[sergi_multimedia]

Iniciado por Tedel

Si no me falla la memoria, es así:

Código:

src: url(../fonts/fuente.svg#fuente) format('svg');

Verifica buscando sobre el método a prueba de balas para el @font-face. Hay varias páginas con ese dato.

Efectivamente Tedel, he hecho lo que decías y ahora en mi iPhone se visualiza correctamente la fuente.

Para gente que le puede servir de ayuda, aquí está mi código:

Código CSS:

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

Saludos y gracias!