¿Cómo incrustar fuentes en HTML?

Question

Estoy tratando de encontrar una solución decente (especialmente desde el lado de SEO) para incrustar fuentes en páginas web. Hasta ahora he visto la solución W3C , que ni siquiera funciona en Firefox, y esta solución genial . La segunda solución es solo para títulos. ¿Hay alguna solución disponible para el texto completo? Estoy cansado de las fuentes estándar para páginas web.

¡Gracias!

Answer 1

Las cosas han cambiado desde que esta pregunta fue originalmente formulada y respondida. Se ha realizado una gran cantidad de trabajo para lograr la incrustación de fuentes en varios navegadores para que el texto del cuerpo funcione con la incrustación de @ font-face.

Paul Irish reunió Bulletproof @ font-face sintaxis combinando intentos de varias otras personas. Si realmente revisas todo el artículo (no solo la parte superior), se permite una sola declaración de @ font-face para cubrir IE, Firefox, Safari, Opera, Chrome y posiblemente otros. Básicamente, esto puede alimentar a OTF, EOT, SVG y WOFF de una manera que no rompa nada.

Recortado de su artículo:

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('Graublau Web Regular'), local('Graublau Web'),
    url("GraublauWeb.woff") format("woff"),
    url("GraublauWeb.otf") format("opentype"),
    url("GraublauWeb.svg#grablau") format("svg");
}

Trabajando desde esa base, Font Squirrel reunió una variedad de herramientas útiles que incluyen @ Font-face Generator que le permite cargar un archivo TTF o OTF y obtener archivos de fuente convertidos para los otros tipos, junto con CSS pre-construido y una página HTML de demostración. Font Squirrel también tiene Cientos de @ kits de fuentes de cara .

Soma Design también reunió el FontFriend Bookmarklet , que redefine las fuentes en una página sobre la marcha. puedes probar cosas Incluye el soporte para arrastrar y soltar @ font-face en FireFox 3.6+.

Más recientemente, Google ha comenzado a proporcionar Fuentes web de Google , una variedad de fuentes disponibles bajo un Licencia de código abierto y servida desde los servidores de Google.

Restricciones de licencia

Finalmente, WebFonts.info ha reunido una buena lista wiki de Fuentes disponibles para incrustar en @ font-face basadas en licencias. No pretende ser una lista exhaustiva, pero las fuentes deben estar disponibles (posiblemente con condiciones como una atribución en el archivo CSS) para incrustar / vincular. Es importante leer las licencias , ya que hay algunas limitaciones que no se adelantan, obviamente, en las descargas de fuentes.

Answer 2

Prueba Facetype.js , conviertes tu. Fuente TTF en un archivo Javascript. Totalmente compatible con SEO, admite FF, IE6 y Safari y se degrada con gracia en otros navegadores.

Answer 3

No, no hay una solución decente para el tipo de cuerpo, a menos que estés dispuesto a atender solo a aquellos con navegadores de vanguardia.

Microsoft tiene WEFT , su propia tecnología patentada para incrustar fuentes, pero no la tengo escuché hablar de él en años, y no conozco a nadie que lo use.

Me las arreglo con sIFR para el tipo de visualización (titulares, títulos de publicaciones de blog, etc.) y uso de una de las fuentes seguras para la web menos desgastadas para el tipo de cuerpo (como Trebuchet MS). Si está aburrido con todas las fuentes seguras para la web, probablemente esté definiendo el término de manera demasiado restringida - & nbsp; mire esta matriz de fuentes de valores que se incluyen con los principales sistemas operativos y es probable que pueda encontrar una cascada de fuentes que atrape casi todos los usuarios web.

Por ejemplo: font-family: " Lucida Grande " ;, " Verdana " ;, sans-serif es una cascada de fuentes común; OS X viene con Lucida Grande, pero aquellos con Windows obtendrán Verdana, una fuente segura para la web con letras de tamaño y forma similares a Lucida Grande. Los usuarios de Linux también obtendrán Verdana si han instalado el paquete de fuentes seguro para la web que existe en la mayoría de los administradores de paquetes de las distribuciones, o de lo contrario recurrirán a un sans-serif normal.

Answer 4

Y también es poco probable: EOT es un formato bastante restrictivo que solo es compatible con IE. Tanto Safari 3.1 como Firefox 3.1 (bueno, el alfa actual) y posiblemente Opera 9.6 admiten la incrustación de fuentes de tipo verdadero (ttf), y al menos Safari admite fuentes SVG a través del mismo mecanismo. Una lista aparte tuvo una buena discusión acerca de esto por un tiempo atrás .

Answer 5

Echa un vistazo a Typekit , una opción comercial (también tienen un paquete gratuito disponible).

Utiliza diferentes técnicas según el navegador que se esté usando (formato @ font-face vs. EOT ), y se encargan de todos los problemas de licencias de fuentes para tu también. Es compatible con todo hasta IE6.

Aquí hay más información sobre cómo funciona Typekit:

• http://forabeautifulweb.com/blog/about/first_impressions_of_typekit
• http: // www.sitepoint.com/blogs/2009/06/01/web-fonts-get-real-with-typekit/

Answer 6

Le pregunté esto hace un tiempo . La respuesta es básicamente que no funciona. :(