Si solo tengo WOFF y EOT, ¿qué navegadores estoy admitiendo con @ font-face?

16

Estamos buscando comprar una fuente que solo permita su uso en la web en los formatos provistos: WOFF y EOT.

No estoy seguro de en qué navegadores funcionan y parece que no puedo encontrar información actualizada. ¿Qué navegadores puedo soportar con solo esos dos?

Mi única experiencia es con la sintaxis de fontspring que tiene EOT, WOFF, TTF y SVG.

erik
fuente
Pregunta relacionada en el sitio de Diseño gráfico: ¿Cuál es el conjunto más pequeño de formatos de fuente web que cubre todos los navegadores?
user56reinstatemonica8

Respuestas:

23

¡Esta es la forma estándar de cargar con @ font-face , arreglos hacky y todo!

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

Pero elimine SVG y perderá el soporte para iOS <5.0 casi por completo

Can I Use tiene una excelente tabla para el soporte del navegador, generalmente otra para EOT , otra para WOFF , otra para SVG y finalmente una más para TTF . Los he insertado a continuación para mayor claridad, y esto debería guiarlo sobre qué probar, pero tenga en cuenta que esto cambiará bastante rápido.

Editar por wyu : he compilado una tabla para que pueda ver el soporte al lado del otro

Soporte de navegador @ font-face en general

Soporte de navegador @ font-face en general

Soporte de navegador EOT

Soporte de navegador EOT

Soporte de navegador WOFF

Soporte de navegador WOFF

Soporte de navegador SVG

Soporte de navegador SVG

Soporte de navegador TTF

Soporte de navegador TTF

toomanyairmiles
fuente
3
¿Por qué se declara eot de dos maneras diferentes: .eot y .eot? #iefix?
Sam
2
Para cualquiera que revise esta respuesta en el futuro ... Android> = 4.4 ahora es compatible con WOFF caniuse.com/#feat=woff
ozke
3
Estimado @ozke, soy del futuro, gracias por compartir este hecho útil. También es posible que le interese saber que, para fines de 2015, el uso de versiones del navegador de Android que no sean compatibles woffse reducirá a menos del 2% de los usuarios globales, y Chrome eclipsará el navegador de Android. Android (16%) y UC (8%), que son compatibles woff. Firefox para Android también; sin embargo, su uso nunca excederá el 1%. Ahora puede volver a escuchar "All About That Bass" de Meghan Trainor, que entiendo que era habitual en octubre de 2014.
user56reinstatemonica8
¿Entonces solo necesita fuentes web ahora?
SuperUberDuper
1

SVG no lo llevará a ninguna parte con @ font-face; pero, EOT es compatible con IE; donde como, TTF y OTF son compatibles con todos los otros navegadores principales. En cuanto a WOFF, al leer un poco, con su similitud con TTF y OTF, es bastante probable que sea compatible con los mismos navegadores que TTF o OTF. Mi sugerencia, si está realmente interesado, pruebe cada extensión @ font-face en un navegador y vea lo que obtiene, y luego envíe lo que recibió al W3C para que actualicen su página de estándares para el descriptor @ font-face. (Ni siquiera incluye extensiones de fuente "seguras" actualmente).

Si todo lo demás falla, estoy bastante seguro de que W3Schools está actualizado: http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

Jeff Langemeier
fuente
El problema es que Safari Mobile 4.1 y versiones posteriores solo admiten SVG.
toomanyairmiles
@toomanyairmiles Es por eso que al final, hace que se vea bien para su "defecto" y luego lo hace ver increíble para aquellos que "pueden" verlo. No se puede tener una cobertura del 100% ya que la mayoría de las fuentes no tienen un OTF, EOT y SVG.
Jeff Langemeier
En realidad puedes. He creado varios sitios que tienen una cobertura del 100% comprando fuentes que vienen en los cuatro tipos, o usando fuentes gratuitas y generando los archivos yo mismo, funciona perfectamente.
toomanyairmiles
@toomanyairmiles Aquí es donde la escritura rápida y suelta me mata, necesario No siempre puede tener una cobertura del 100%, a veces no sucede y el diseñador debe recordar que, en el peor de los casos, las personas usan navegadores antiguos y tal, 100 % de cobertura no siempre significa 100% de cobertura; donde estoy aproximadamente en el 40-50% de los usuarios de Internet todavía usan IE 7 o anterior, que no admiten muy bien la fuente en primer lugar, para tener una verdadera cobertura del 100%, debe haber un resultado final que se ve "decente" o al menos mantiene su sitio dentro de las limitaciones de las fuentes "más elegantes".
Jeff Langemeier
Bueno, lo he probado, en sitios pequeños y de marcas importantes. Las fuentes funcionan en IE6 y 7. ¿La calidad de renderizado es tan buena como la de un navegador moderno? No, pero funciona bien.
toomanyairmiles
1

Los proveedores de Webfont realmente necesitan proporcionar soporte completo para sus fuentes, ¡específicamente por esto! Pensaría que esto sería una segunda naturaleza, incluso para la nube (con la opción de incluir o excluir): si las personas se ven obligadas a buscar fuentes en la lista negra, ¿eso no solo fomentaría la piratería una vez que se encuentran las fuentes? @ eb_p1

eburnett
fuente
1
¿Espera por qué? EOT estaba muerto cuando se hizo esta pregunta por primera vez, era un cadáver podrido cuando respondiste, y hoy no he visto una fuente EOT en más de un año.
SilverbackNet