¿Cómo cargo las fuentes externas en un documento HTML?

Question

¿Cómo puedo cargar archivos de fuentes externas en un documento HTML?

Ejemplo: que el texto "bla, bla, bla, bla, bla, bla, bla" una fuente personalizada desde un archivo TTF en el mismo directorio usando CSS HTML y/o JavaScript

Answer 1

Echa un vistazo a este A List Apart article. El CSS pertinente es:

@font-face { 
    font-family: "Kimberley"; 
    src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) format("truetype"); 
} 
h1 { font-family: "Kimberley", sans-serif } 

Lo anterior funcionará en Chrome/Safari/FireFox. Como señaló Paul D. Waite en los comentarios, puede hacer que funcione con IE si convierte la fuente al EOT format.

La buena noticia es que esto parece degradarse con gracia en navegadores más antiguos, por lo que siempre y cuando esté consciente y cómodo con el hecho de que no todos los usuarios verán la misma fuente, es seguro de usar.

Answer 2

CSS3 ofrece una manera de hacerlo con la @ regla de la fuente de la cara.

http://www.w3.org/TR/css3-webfonts/#the-font-face-rule

http://www.css3.info/preview/web-fonts-with-font-face/

Here es un número de maneras diferentes que funcionarán en los navegadores que no soportan la regla @ font-face.

Answer 3

En cuanto a la respuesta de Jay Stevens: "Las fuentes disponibles para utilizar en un archivo HTML tienen que estar presentes en la máquina del usuario y accesible desde el navegador web, así que a menos que desee distribuir las fuentes a la máquina del usuario a través de un externo independiente proceso, no se puede hacer ". Es verdad.

Pero hay otra manera usando javascript/lienzo/flash - muy buena solución da Cufon: http://cufon.shoqolate.com/generate/ biblioteca que genera un muy fácil de usar métodos de fuentes externas.

Answer 4

Si quieres apoyar a más navegadores que la fantasía CSS 3, se puede ver en la biblioteca de código abierto cufon javascript library

Y aquí es the API, si usted quiere hacer más cosas de moda.

Major Pro: le permite hacer lo que quiere/necesita.

Mayor Contra: Impide la selección de texto en algunos navegadores, por lo que su uso es apropiado en los textos de cabecera (pero se puede utilizar en toda su sitio si lo desea)

Answer 5

Microsoft tiene un método CSS propietaria de incluir fuentes incrustadas (http://msdn.microsoft.com/en-us/library/ms533034(VS.85).aspx), pero probablemente no debería recomendarse.

He utilizado sIFR antes, ya que funciona genial: usa Javascript y Flash para reemplazar dinámicamente el texto normal con algo de Flash que contenga el mismo texto en la fuente que desee (la fuente está incrustada en un archivo Flash). Esto no afecta el marcado alrededor del texto (funciona mediante el uso de una clase CSS), aún puede seleccionar el texto, y si el usuario no tiene Flash o lo tiene deshabilitado, se degradará gratamente al texto en cualquier fuente usted especifica en CSS (por ejemplo, Arial).

Answer 6

Paul Irish tiene una forma de hacer esto que cubre la mayoría de los problemas comunes.Véase su bullet-proof @font-face article:

La variante final, que deja de datos innecesarios que se descargue por el IE, y funciona en IE8, Firefox, Opera, Safari y Chrome se ve así:

@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"); 
} 

También enlaza con a generator que traducirá las fuentes en todos los formatos que necesite.

Como ya se ha especificado, esto solo funcionará en la última generación de navegadores. Su mejor opción es usar esto junto con algo como Cufon, y solo cargar Cufon si el navegador no es compatible con @font-face.

Answer 7

probar este

<style> 
@font-face { 
     font-family: Roboto Bold Condensed; 
     src: url(fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf); 
} 
@font-face { 
     font-family:Roboto Condensed; 
     src: url(fonts/Roboto_Condensed/RobotoCondensed-Regular.tff); 
} 

div1{ 
    font-family:Roboto Bold Condensed; 
} 
div2{ 
    font-family:Roboto Condensed; 
} 
</style> 
<div id='div1' >This is Sample text</div> 
<div id='div2' >This is Sample text</div> 

Answer 8

Yo no vi ninguna referencia a Raphael.js. Así que pensé en incluirlo aquí. Raphael.js es compatible con versiones anteriores hasta IE5 y Firefox muy temprano, así como con todos los demás navegadores. Utiliza SVG cuando puede y VML cuando no puede. Lo que haces con él es dibujar sobre un lienzo. Algunos navegadores incluso te permitirán seleccionar el texto que se genera. Raphael.js se pueden encontrar aquí:

http://raphaeljs.com/

Puede ser tan simple como la creación de su área de dibujo de papel, especificando la fuente, el peso, el tamaño, etc ... y luego diciéndole que ponga su cadena de texto en el papel. No estoy seguro si se solucionan los problemas de licencia o no, pero está dibujando el texto, así que estoy bastante seguro de que elude los problemas de licencia. Pero consulte con su abogado para estar seguro. :-)