Ardilla Quio Ardilla Quio

17 de Noviembre de 2011

@font-face: Incrustando tipografías en una página web (revisado)

El código CSS que habíamos recomendado en nuestro artículo @font-face: Incrustando tipografías en una página web era bueno en su momento, pero la salida de Internet Explorer 9, el aumento de formatos de fuente soportados por los navegadores, así como el descubrimiento de que es poco recomendable usar la instrucción local(), ha hecho necesario actualizar el código para que funcione correctamente en la mayoría de navegadores, sistemas operativos y servidores.

El nuevo código a usar será este:

@font-face {
	font-family: "Kimberley";
	src: url("fonts/kimberley.eot");
	src: url("fonts/kimberley.eot?#iefix") format("embedded-opentype"),
	     url("fonts/kimberley.woff") format("woff"),
	     url("fonts/kimberley.ttf") format("truetype"),
	     url("fonts/kimberley.svg#kimberley") format("svg");
}

Principales cambios

Veamos el código antiguo:

@font-face {
	font-family: "Kimberley";
	src: url("fonts/kimberley.eot");
	src: local("Kimberley"),
	     url("fonts/kimberley.ttf") format("truetype");
}

Los principales cambios son:

  • Se ha añadido el nuevo formato de fuente WOFF, el cual se supone va a ser el nuevo estándar
  • Se ha introducido el formato de fuente SVG, para hacer el código compatible con iOS < 4.2 (iPhone, iPad)
  • Se ha añadido una nueva instrucción para cargar el formato EOT. Se suponía que esta era la nueva forma de cargar este formato en Internet Explorer ya que el código "?#iefix" solucionaba el error de este navegador por el cual no cargaba las fuentes si en el atributo src aparecía algo más que la URL de esta fuente. Sin embargo, hubo que añadir al código la línea anterior porque Internet Explorer 9 en modo compatibilidad con las versiones 7 u 8 no acepta esta solución
  • Se ha eliminado la instrucción local() porque hacía que el código no funcionase en Android así como en algunas configuraciones de Linux. Además su uso ha sido desaconsejado porque distintas fuentes pueden tener el mismo nombre

36 comentarios

Daniel Martinez

13/07/2020 20:26:34

Voy a probar a ver si me funciona ya que tengo error de SHA1 al cargar la fuente en internet explorer, se carga una vez pero si actualizo, me manda error de que no se han cargado debido al certificado SHA1 y que cambie a SHA2.

Ignacio

27/07/2016 14:28:54

GRACIAS!!!!!!!!!!

Leí 500 artículos y ninguno me sirvió. ESTE SI FUNCIONA

contacto@fjsl.es

27/07/2016 11:42:02

Excelente. Muchísimas gracias por el artículo, me pelee y pelee con la codificación y los diferentes formatos. Pero era sencillo.

Anónimo

05/05/2016 17:56:44

Hola!

Una pregunta estoy usando una fuente pero en algunos navegadores se ve un poco cortada por debajo, hay alguna razón y/o solución para esto?

Las estoy convirtiendo aquí

https://everythingfonts.com/font-face

Anónimo

19/06/2014 02:58:15

Me pasaba lo mismo y lo solucioné cambiando el tipo de html a:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Prueben con eso!

Anónimo

28/10/2013 22:54:04

Hola comoe stas pues mira yo tengo este código que estoy utilizando para mi trabajo

@font-face {

font-family: "museo";

src: url('http://imagem.buscape.com.br/especiales/navidad-2013/fonts/Museo900-Regular.eot');

src: url('http://imagem.buscape.com.br/especiales/navidad-2013/fonts/Museo900-Regular.eot?#iefix') format('embedded-opentype'),

url('http://imagem.buscape.com.br/especiales/navidad-2013/fonts/Museo900-Regular.woff') format('woff'),

url('http://imagem.buscape.com.br/especiales/navidad-2013/fonts/Museo900-Regular.ttf') format('truetype'),

url('http://imagem.buscape.com.br/especiales/navidad-2013/fonts/Museo900-Regular.svg#Museo900-Regular') format('svg');

font-weight: normal;

font-style: normal;

}

el problema es que se ve en chrome pero en firefox e ie no se ve!!! ojalá pudieras ayudarme

Luis

02/10/2013 22:09:45

Hola Amelie.

El mensaje que comentas que te da en FontSquirrel es "Monotype has requested that their font Soho Gothic Pro be blacklisted by the Generator. You will not be able to convert this font.", es decir, que debido a los derechos de la fuente no puedes convertirla a otros formatos.

Las preguntas: las comillas es lo mismo. Las mayúsculas depende del sistema operativo del servidor (es decir, probablemente sí sea relevante).

Intentalo usando una fuente libre cualquiera a ver si el problema está en tu fuente.

Un saludo.

Amelie

02/10/2013 21:21:10

Así tengo mi código

@font-face {

font-family: "SohoGothicProRegular";

src: url("../fuentes/SohoGothicPro-Regular.eot");

src: url("../fuentes/SohoGothicPro-Regular.eot?#iefix") format("embedded-opentype"),

url("../fuentes/SohoGothicPro-Regular.woff") format("woff"),

url("../fuentes/sohogothicproregular.ttf") format("truetype"),

url("../fuentes/SohoGothicPro-Regular#sohogothicproregular") format("svg");

}

y no me funciona en IE. El archivo original es .otf y al ocupar FonSquirrel me sale "Monotype has requested that their font ..."

Alguien sabe que está fallando, tiene algo que ver que este entre comillas o comilla simple el url?? tiene que ver que el nombre de la fuente este con letras mayusculas??? he visto todas las opciones para deccartar y no funciona.

Sergi

12/06/2013 23:52:03

Habeis sido la solucion! muy bien explicado y detallado. Con cuidado funciona a la perfeccion!!

Muchas gracias,

Marta

29/11/2012 12:00:43

Hola estoy intentando que una determinada fuente me funcione en IE 8 en Chrome y en Firefox. Solo consigo que me funcione en Chrome y Firefox pero no hay manera que funcione en IE8. Por favor estaría muy agradecida si pudieran ayudarme porque he probado un montón de cosas y nada. Muchísimas gracias.

@font-face{

font-family:'OpenSans';

src: url('../Font/helveticaneueltstdhv.eot');

src: url('../Font/helveticaneueltstdhv.eot?#iefix') format('embedded-opentype'),

url('../Font/helveticaneueltstdhv.ttf') format('truetype');

}

Luis

15/11/2012 18:50:59

Hola lizgisella.

Puede ser porque Firefox aplica una política de mismo origen muy estricta. Si estás probándolo en local o si tienes la URL al CSS en forma absoluta pero la URL a la fuente en relativa, puede pensar que son dominios distintos.

Si ese es el problema, puedes intentar arreglarlo cambiando las rutas (todas relativas o todas absolutas) o poniendo esto en tu .htaccess:

<FilesMatch "\.(ttf|otf|eot)$">

<IfModule mod_headers.c>

Header set Access-Control-Allow-Origin "*"

</IfModule>

</FilesMatch>

Puedes leer más sobre esta solución y otras en este enlace:

http://stackoverflow.com/questions/2856502/css-font-face-...

Un saludo.

lizgisella

15/11/2012 16:23:04

Hola,

Tengo unproblema esta fuente en mozilla firefox no funciona

@font-face {

font-family: 'abel-regular-webfont';

src: url('../fuente/abel-regular-webfont/abel-regular-webfont.eot');

src: url('../fuente/abel-regular-webfont/abel-regular-webfont.eot?#iefix') format('embedded-opentype'),

url('../fuente/abel-regular-webfont/abel-regular-webfont.woff') format('woff'),

url('../fuente/abel-regular-webfont/abel-regular-webfont.ttf') format('truetype'),

url('../fuente/abel-regular-webfont/abel-regular-webfont.svg#abel-regular-webfont') format('svg');

}

y lo utilizo en esto

{font-family:'abel-regular-webfont',Arial,serif}

En IE, Chrome si funciona pero en mozilla firefox no..

Luis

05/11/2012 13:16:22

Hola, a.molina.

Perdona que no te haya contestado antes, pero no me has dado tiempo. Me alegro que hayas encontrado el error. Mi respuesta a tu primer comentario hubiese sido que necesitábamos más información (un enlace o algo).

Sobre la pregunta a tu segundo comentario, no conozco lo suficiente el mundo de la transformación de los archivos de fuentes como para responderte. Sólo puedo decirte que yo he hecho ese proceso muchas veces y que nunca me ha dado problemas, pero buscando por la web he visto que hay más gente a la que le ha pasado. Alguna de esas personas dicen que lo solucionaron usando este conversor:

http://ttf2eot.sebastiankippe.com/

Espero que te ayude.

Un saludo.

a.molina

05/11/2012 12:07:48

Me autorespondo, ya lo he conseguido solucionar. El problema venía del archivo .eot que por lo que se ve estaría mal convertido ya que lo he probado con otra fuente y me ha ido perfecto.

Ahora me surge una duda, creo que los archivos de la fuente los sacamos convirtiendolos a partir de un solo .ttf. ¿Puede dar problemas esto entonces o ha sido coincidencia?

Gracias!

a.molina

05/11/2012 11:09:06

Buenas,

Antes que nada os doy las gracias por este tutorial ya que es de los mejores que he encontrado al respecto.

He de decir que he utilizado vuestro código y lamentablemente no consigo hacerlo funcionar en IE8 y anteriores. He hecho todas las pruebas que decís en los diferentes comentarios (lo de las colisiones de CSS etc.) pero sigo sin poder ver las fuentes en IE8 y anteriores. He convertido los formatos de fuentes desde varias webs distintas (incluida font squirtel) y nada de nada, que no hay manera de que se vean.

Ya no se que más hacer. Uso prestashop, por si puede servir de algo, porque ya no se que más pensar.

Luis

25/10/2012 10:07:17

Hola hramos_net.

Como puedes ver en esta tabla de soporte de tipos de fuente por navegador, sin TTF ni SVG pierdes los iPhone viejos y todos los Android.

El único problema será que estos navegadores pasarán a la siguiente fuente de la lista que hayas puesto en tu declaración font-family.

Un saludo.

hramos_net

25/10/2012 01:09:35

Hola a todos, en mi pagina solo he puesto:

@font-face {

font-family: "Kimberley";

src: url("fonts/kimberley.eot");

src: url("fonts/kimberley.eot?#iefix") format("embedded-opentype"),

url("fonts/kimberley.woff") format("woff");

}

como ven he obviado ttf y svg que es para moviles, he probado en Chrome y IE, la nueva fuente se ve bien, mi pregunta es: ¿qué dispositivo /navegador usa la fuente "ttf"? que problemas puedo tener si no la tengo en cuenta en el CSS de mi pagina?

Luis

27/08/2012 11:01:06

Hola Christian.

Como no me canso de repetir en este y en otros artículos: "Siento no poder ayudarte, pero con los datos que das no puedo saber de lo que se trata". Si quieres que intentemos ayudarte tendrás que darnos más pistas sobre cuál es el problema.

En IE9 este código funciona perfectamente como puedes leer en algunos de los comentarios (además de que es el código que utilizan en Font Squirrel donde lo usan miles de personas con IE9).

Un saludo.

Christian

24/08/2012 22:57:48

a mi solo me funciona en google chrome y firefox en IE9 no. u.u!

Gihsoft

28/07/2012 13:04:13

Francamente , una web para sacarse el sombrero, muchas gracias por compartir con todos estos conocimientos.

Luis

05/05/2012 00:37:26

Hola Alex.

Gracias por volver para comentarnos tu solución. Podría habértelo comentado yo (si miras el enlace que te puse en la anterior respuesta, verás que en el comentario 38 dice que funciona lo que tú has hecho), pero no sabía que esa solución era válida (supongo que estamos hablando de una intranet).

Como comentario, dado que veo que tienes control sobre los equipos que se conectan a tu web, quizá puedas modificar un poco el CSS para volver a añadir la instrucción "local" que evitaría que tus usuarios se bajasen la fuente de la web, una vez que ya la tienen instalada en su máquina (de hecho supongo que podrías eliminar directamente todo el font-face y poner la fuente como una fuente "normal").

Un saludo.

Alex

04/05/2012 23:33:06

Muchas gracias por su ayuda, pero de un momento a otro comenzo a funcionar, lo q se tuvo q hacer fue instalar en cada maquina la fuente del Codabarmedium (.ttf).

Lo demas funciona correctamente.

Igual, gracias por su tiempo y por su ayuda

Luis

04/05/2012 11:19:45

Hola Alex.

Me parece que no vamos a poder hacer nada a ese respecto, ya que es un bug de Firefox por el cual no imprime las fuentes web:

https://bugzilla.mozilla.org/show_bug.cgi?id=468568

Siento no poder ser de más ayuda.

Un saludo.

Alex

03/05/2012 22:29:07

Muchas gracias por su respuesta, pero les comento q ya hice el cambio q me dijeron, y aun asi no funciona.

Lo q me olvide de indicar es q la fuente la tengo subida en un servidor y la utilizo en un archivo CSS () q sirve para imprimir una pagina web mediante un boton con javascript (sin convertilo a PDF ni nada d eso).

Lo raro es q en pantalla si se visualiza el codigo de barras, pero al querer imprimir o hacer una Vista Preliminar de impresion de la pagina web, no funciona dicho codigo de barras, osea me salen los numeros, pero no en codigo de barras como quisiera.

Utilizo Firefox 12.0, el Chrome es el 18.0.1025.162 m (asi dice en Ayuda de Chrome) y el IE es el 8.0. Como lo mencione anteriormente, en las versiones de Chrome y IE si funcionan, mas no en Firefox.

Gracias por su ayuda..

Luis

03/05/2012 09:41:22

Hola Alex.

Gracias por tus comentarios.

El código que pones no puede funcionar en ningún navegador porque has puesto:

h3 {

font-face: 'CodabarMedium';

...

Cuando deberías poner:

h3 {

font-family: 'CodabarMedium';

...

El resto del código está correcto (lo he comprobado bajándome la fuente Codabar y probando tu código en un HTML de prueba).

Por cierto, me gusta mucho el efecto de la fuente de código de barras.

Un saludo.

Alex

03/05/2012 02:04:53

Q tal, un gusto, excelente post. Mi duda es que a mi me funciona bien en Chrome y IE, pero en firefox no funciona. Les pongo mi codigo css:

@font-face {

font-family: 'CodabarMedium';

src: url('../fonts/CodabarMedium.eot');

src: url('../fonts/CodabarMedium.eot?#iefix') format('embedded-opentype'),

url('../fonts/CodabarMedium.woff') format('woff'),

url('../fonts/CodabarMedium.ttf') format('truetype'),

url('../fonts/CodabarMedium1.svg#CodabarMedium') format('svg');

font-weight: normal;

font-style: normal;

}

y lo utilizo en esta parte:

h3 {

font-face: 'CodabarMedium';

font-size:30px;

margin-bottom:10px;

color: black;

}

Pero como les digo, no funciona en firefox

Gracias de antemano

Luis

20/03/2012 11:48:38

Hola Abel.

Siento que no te funcione el código, pero sin más información no puedo buscar el problema. ¿Has probado las cosas que comento en el anterior comentario? Porque el código está bien y funciona en IE (es el mismo código que usan en Font Squirrel).

Un saludo.

Abel

19/03/2012 23:26:14

Yo tengo el mismo problema, lo veo bien en Chrome, Mozilla, Safari y Maxthon pero con Internet Explorer no muestra las fuentes.. :(

Ya no se que más probar...

Gracias por las ayudas prestadas en otros artículos.. :)

Luis

24/01/2012 12:19:23

Hola Patricia.

Yo he probado tu código (con otra fuente, cambiándole el nombre a los archivos de la fuente) y me funciona perfectamente en IE6 a IE9.

Lo único que se me ocurre es que sea un problema en el archivo "eot" de la fuente o un problema de colisiones con otros estilos CSS (IE suele usar reglas distintas que el resto de navegadores).

Por eso, sin tener el todo el código y fuentes, sólo puedo recomendarte dos cosas:

- Generar los archivos de la fuente con Font Squirrel

- Probar el CSS sólo con ese estilo y con algo así:

h1 {font-family: Avant;}

Si así funciona, revisa las colisiones con otros estilos.

Un saludo.

Anónimo

24/01/2012 10:44:28

Hola,

estoy desesperada con ésto, no me funciona...

@font-face {

font-family: "Avant";

src: url("fonts/Avant-Garde-Demi.eot");

src: url("fonts/Avant-Garde-Demi.eot?#iefix") format("embedded-opentype"),

url("fonts/Avant-Garde-Demi.woff") format("woff"),

url("fonts/Avant-Garde-Demi.ttf") format("truetype"),

url("fonts/avantgardedemi.svg#avantgardedemi") format("svg");

}

Lo veo en Firefox, Chorome, Opera, Safari, ... pero no con iE!!

¿estoy haciendo algo mal que se me escapa?

Gracias! Patricia

Comentario anónimo
Comentar como usuario