Duda: Usar @font-face o Cufón

Tunnecino #1 Mar '11

Hola, pues eso, como reza el título estoy totalmente liado. Sé que @font-face no es problema para IE+6, desde la 3.1 Firefox lo soporta, Chrome desde hace bastantes versiones también, lo mismo de Opera y Safari.

Siempre había usado cufón, aunque ahora no estoy tan seguro. Estoy desarrollando un portal web, y usaré bastante jquery y algunas librerías javascript, y si puedo ahorrarme usar una (en este caso cufón) pues bienvenido sea.

Aprovecho también para preguntar a los entendidos de CSS3, si al usar:

@font-face{
font-family:'Fontin-Regular';
src: url('Fontin-Regular.otf') format('opentype');
}

y este para IE

@font-face{
font-family:'Fontin-Regular';
src: url('Fontin-Regular.eot');
}

(Sacado de anieto2k.com)

Luego el navegador comprobaría que el usuario tiene la fuente instalada. Con este plugin de jquery, que he encontrado en la red:

$(document).ready(function() {
    if(!$.fontAvailable('Fontin-Regular')) {
      Cufon.replace('h1');
    }
});

Voy a intentar probarlo ahora, también intentaré ver como se pasa una fuente a formato .eot y demás.

Un saludo

eXtreM3 #2 Mar '11

No he entendido lo que quieres que te contestemos, explicate mejor por fi. Ultimamente he usado mucho el @font-face y creo que podré ayudarte.

NeB1 #3 Mar '11

#1 al final font-face será el estandar, puedes ir metiéndote ya de lleno en él.

Con cufon hay algunos problemillas, como no poder seleccionar texto (a no ser que ya se pueda, que hace años que no lo uso) o que no cumples las normas EULA y si estás usando una fuente de pago, te pueden denunciar.

No sé si lo conocías, pero también tienes otras alternativas como SIFR o TYPEFACE (aunque me gusta más cufon, cada uno tiene sus pros y sus contras).

Thanat0s #4 Mar '11 Cofrade

Yo estuve trasteando con el font-face y el mayor problema es que en css 2.1 no está definido

Aún así, no conseguí que funcionara correctamente en otras máquinas que no lo tenían instalado (con una fuente rara, quizás era por eso):

@font-face {
 font-family: 'MyFontFamily';
 src: url('myfont-webfont.eot?') format('eot'),
 url('myfont-webfont.woff') format('woff'),
 url('myfont-webfont.ttf') format('truetype'),
 url('myfont-webfont.svg#svgFontName') format('svg');
 }

Enlaces que me ayudaron:
http://somadesign.ca/2011/the-definitive-font-face-syntax/
http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax

Página para cambiar los tipos de fuente de uno a otro de forma gratuita:
http://onlinefontconverter.com/

2 respuestas

eXtreM3 #5 Mar '11

El truco es usar .ttf para firefox y .eot para IE

A mi lo de #4 no me funcionaba, quiero decir, ponerlo todo del tirón en el mismo css. La solución es crearte un css para ff (donde incluirás tambien las reglas de safari y chrome) y otro para IE. Entonces en el primer css pones el @font-face del .ttf, y en el 2º css pones el @font-face del .eot.

Funciona, comprobado

Tunnecino #6 Mar '11

Yo al final he tirado por @font-face:

@font-face {
    font-family: 'BebasNeueRegular';
    src: url('bebasneue-webfont.eot');
    src: url('bebasneue-webfont.eot?iefix') format('eot'),
         url('bebasneue-webfont.woff') format('woff'),
         url('bebasneue-webfont.ttf') format('truetype'),
         url('bebasneue-webfont.svg#webfontaHRbuZ30') format('svg');
    font-weight: normal;
    font-style: normal;

}

Y he usado esta página para pasar de .TTF al resto de formatos, http://www.fontsquirrel.com/fontface/generator

NeB1 #7 Mar '11

#4 es que es especificación de CSS3 creo. Por eso digo que 'acabará siendo estándar' (pero aún no lo es).

1 respuesta

Thanat0s #8 Mar '11 Cofrade

#7 Yap, a ver si lo instauran pronto y sobre todo IE se pone al día y lo admite sin problemas.

2 respuestas

NeB1 #9 Mar '11

#8 es que el resto de soluciones siempre te acaban por dar algún problema, yo llevo ya 3 años esperando a que lo implanten de verdad, porque en un buen diseño, una buena tipografía es imprescindible...

2 respuestas

eXtreM3 #10 Mar '11

#9 y cuál es el problema? Esto ahora mismo es una "chapuza-arreglo" y no lo pasa el w3c?

1 respuesta

Tunnecino #11 Mar '11

#8 Te sorprenderías si te dijese que IE admite font-face desde IE5.5?

Yo lo que quería comprobar era si cargaba bien la fuente en el navegador, y si no, pues cargar cufon. Sigo estudiandolo.

1 respuesta

Thanat0s #12 Mar '11 Cofrade

#10 No, no lo pasa w3c, al menos no con css 2.1.

#11 Sí, aunque en el fondo es coherente porque estaba implementado en versiones anteriores de css a 2.1 y lo quitaron en ésta.

B

briceida #13 Jun '11

Puedo usar el @font-face pero sin el css ocea hize un correo para enviarlo via email pero como saben no me permite estilos hay una forma de poner el css en linea...por favor...:S

Tunnecino #14 Jun '11

Eh... si que puedes añadir estilos, puedes enviar un email en html si configuras bien los headers y el chartype, y si el lector email del receptor es capaz de leerlo.

B

briceida #15 Jun '11

me puedes dar un ejemplo o algun blog o un link de donde pueda sacar algo de informacion por que ya me canse de buscar y no encuentro nada...:S:S:S:S..0_*....

Tunnecino #16 Jun '11

http://www.google.es/search?source=ig&hl=es&rlz=&q=Emails+html+con+php&aq=f&aqi=g-v1&aql=&oq= De los 5 primeros resultados, cualquiera te vale.

B

briceida #17 Jun '11

haha gracias..pero creo que no va por alli lo que quiero es enviar html con css pero por correo electronico...jeje..GRacias---

Tunnecino #18 Jun '11

Claro... y que te estoy diciendo... tan solo tienes que enviar una web html con un css linkeado en una web externa.

B

briceida #19 Jun '11

mm no te enojess...mira te explico nosotros nos dedicamos a mandar correos masivos de la empresa...pero queremos implementar el uso de letras diferentes en los correo que no sea totalemente planos y para eso usamos el @font-face pero ala hora de enviarlo, cuando llega a los correos nuestro clientes no pueden ver las letras que las tenemos alojadas en el servidor...mi pregunta seria como hago lineal o como envuelvo este codigo para que las cuentas de correo no me lo eliminen..:

@font-face {
font-family:'ta';
src: url('http://www.servidor.com/fonts/tt0206c.eot');
src: local('&hearts;'),url('http://www.servidor.com/fonts/tt0206c.ttf') format('truetype');
font-weight:normal;
font-style:normal;
font-variant:normal;
}
por favor...:S

Tunnecino #20 Jun '11

Ah claro... hmm... ¿dices que te eliminan los css el gestor de correo? Lo de antes no era a malas, aunque lo haya parecido xD

Creo que tengo una solución que puede seros viable, http://www.google.com/webfonts

B

briceida #21 Jun '11

hahahaha no....es un link de fuentes pero se mandan llamar mediante un style y ps volvemos a lo mismo...jejeje..me dare un golpe-----:d

Tunnecino #22 Jun '11

No No hombre... lo que pasa es que quizás lo que te tira a error es a la hora de linkear en el css una fuente que esté en otro servidor. Por eso, webfonts de google te "instala" las fuentes mediante javascript, y luego en el propio css usas font-family: "Fuente de Google";

Y te digo que yo he enviado emails con contenido html, y sin ningún problema (eso sí, nunca he cambiado las fuentes).

B

briceida #23 Jun '11

exacto así es..Pero creo que no se puede...Te explico lo que pasa es que cuando cambias las fuentes ocupas por fuerzas mandar llamar un estilo para el nombre de las fuentes y así como también la dirección de donde están alojadas las fuentes..Pero ala hora de enviar el html con css los clientes de correo de elimina el estilo y te dejan solo el html...y pues ala hora de que los usuarios habren los correos aparecen la fuente predeterminada...:d...Pero de todas formas si sabes algo me avisos o si yo se algo lo publicare aquí...Saludos....:d

Tunnecino #24 Jun '11

Pero tan solo quita la fuente? O también elimina todos los estilos?

B

briceida #25 Jun '11

no quita la fuente solo elimina los estilos y aparecen la fuente normal.. y te muestra la fuente por defecto....:S

Tunnecino #26 Jun '11

Es decir, si tu creas el estilo

// # CSS # //
p { color: #c2c2c2; }

Y tienes el <p>Hola</p> te lo manda en negro?

A ver si va a ser por que mandas mal los headers.

B

briceida #27 Jun '11

jeje noo mira...puedes enviar código css en linea y el color de fondo y todo eso,,pero sabemos que el @font-face es una función que se declara dentro de tu css verdad....

 
declaracion del estyle
@font-face {
font-family:'titulo prueba';
src: url('http://www.servido.com/fonts/tt0206c_.eot');
src: local('&hearts;'),url('http://www.servidor.com/fonts/tt0206c_.ttf') format('truetype');
font-weight:normal;
font-style:normal;
font-variant:normal;
}
codigo html
<h1 font-family: 'titulo prueba',Arial;>Hola Mundo</h1>

asi mas o menos es..entonces a la hora de enviarlo por correo no te marca nincun error pero cuando los clientes lo reciben ven la letra normal y no ven la letra que mandamos del servidor..si me doi a entender....

pero asi como tu me dices puedes cambiar el color, el color de fondoo enviando el css en linea que es esto:

 <p style="font-family:Arial, Helvetica, sans-serif; font-size:26px; color: #009; font-weight: bold; line-height:28px; margin-bottom:30px;">Hola Mundo</p>

Tunnecino #28 Jun '11

Y si... pruebas a subir el .css a tu hosting, por ej, www.servidor.com/newsettler y llamas al css en el email aí?

Entonces, el css llamará a /font.ttf y tal de forma local. No se si me explico.

B

briceida #29 Jun '11

no puedes usar hojas de datos externas a la hora de enviar un email te manda todo lo que esta en el body mas no lo que esta fuera de el..

Tunnecino #30 Jun '11

No estoy seguro eh... ahora mismo no tengo el servidor conectado pero juraría que no... es más, si te fijas en el 120% de los newsettlers que te envían, son imágenes externas... si no sería super pesado enviar todo el contenido a cada cliente por email.

Duda: Usar @font-face o Cufón

Usuarios habituales

Tags