Hola, somos Arume

Desarrollamos páginas web, aplicaciones para móviles, capas de realidad aumentada y aplicaciones para Facebook. Nos apasiona la informática y somos unos perfeccionistas incurables; por eso en nuestros proyectos utilizamos estándares.

tel. 625 519 694

Mendaña de Neyra, 34, 3º B, 15008, A Coruña

Autenticarse

Registrarse. ¿Has olvidado tu contraseña?

Etiquetas

Saltar las etiquetas

Suscríbete a las RSS

Estás en:

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

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

17 Nov 2011 por Luis

Comentarios: 35

Tipografías

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

Comentarios

35 comentarios. Comentar.

1. Ezequiel el 24 Nov 2011 a las 04:04:41

Hola gente! excelente articulo, de hecho fue el unico que me ha funcionado! he probado y probado, y solo he tenido un gran ERROR con otros codigos, o solo me funcionaba en tal y cual navegador hasta que lei este excelente articulo que escribio Luis, personalmente, GRACIAS.

Sigan asi, y ya soy un nuevo lector del blog.

Saludos desde Argentina :)

2. OK Diseño el 02 Dic 2011 a las 10:01:01

Gracias!!, no conseguia arreglar la compatibilidad con IE9!!

3. Des el 15 Dic 2011 a las 16:33:46

Hola! a mi me funciona en todos los navegadores que he probado, pero se ve la tipografía entrecortada, en cambio si hago zoom se ve perfecta. Sabéis si se puede solucionar?

4. Luis el 15 Dic 2011 a las 20:01:01

Hola, Des.

Siento no poder ayudarte, pero con los datos que das no puedo saber de lo que se trata:

- ¿Se ve entrecortada?¿Por dónde: a la derecha, arriba, abajo, todo alrededor ...?

- ¿Haces zoom con el navegador o con CSS?¿Si es con el navegador, hacer zoom de toda la página o sólo subes el tamaño de fuente?

5. Des el 16 Dic 2011 a las 18:12:27

Hola,

Las fuentes se veían como si le faltaran trozos, todo el trazo de la fuente, probé en explorer y en firefox, hice zoom+ en el navegador firefox con el ctrl+la rosca del mouse, para ver si es que el fontface la dibujaba mal y no, estaba entera, probé a subir el tamaño de la fuente pero el resultado era el mismo, activé el Font Type Clear de win, ya que estoy con un win xp y tampoco se solucionaba. Total, al final, en un acto de desesperación he vuelto a generar el kit de fuentes con el fontsquirel y se ha solucionado solo. Maravillas de la informática...

Muchas gracias por contestar tan rápido :)

6. Luis el 16 Dic 2011 a las 18:20:41

Hola, Des.

Me alegro de que se haya solucionado todo. Supongo que era un fallo en el archivo de la fuente.

Gracias a ti por participar en el blog.

Un saludo.

7. Anónimo el 24 Ene 2012 a las 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

8. Luis el 24 Ene 2012 a las 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.

9. Abel el 19 Mar 2012 a las 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.. :)

10. Luis el 20 Mar 2012 a las 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.

11. Alex el 03 May 2012 a las 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

12. Luis el 03 May 2012 a las 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.

13. Alex el 03 May 2012 a las 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..

14. Luis el 04 May 2012 a las 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.

15. Alex el 04 May 2012 a las 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

16. Luis el 05 May 2012 a las 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.

17. Gihsoft el 28 Jul 2012 a las 13:04:13

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

18. Christian el 24 Ago 2012 a las 22:57:48

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

19. Luis el 27 Ago 2012 a las 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.

20. hramos_net el 25 Oct 2012 a las 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?

21. Luis el 25 Oct 2012 a las 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.

22. a.molina el 05 Nov 2012 a las 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.

23. a.molina el 05 Nov 2012 a las 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!

24. Luis el 05 Nov 2012 a las 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.

25. lizgisella el 15 Nov 2012 a las 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..

26. Luis el 15 Nov 2012 a las 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.

27. Marta el 29 Nov 2012 a las 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');

}

28. Sergi el 12 Jun 2013 a las 23:52:03

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

Muchas gracias,

29. Amelie el 02 Oct 2013 a las 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.

30. Luis el 02 Oct 2013 a las 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.

31. Anónimo el 28 Oct 2013 a las 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

32. Anónimo el 19 Jun 2014 a las 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!

33. Anónimo el 05 May 2016 a las 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

34. contacto@fjsl.es el 27 Jul 2016 a las 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.

35. Ignacio el 27 Jul 2016 a las 14:28:54

GRACIAS!!!!!!!!!!

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

Comentar

Comentar de forma anónima

Puedes comentar poniendo cualquier nombre o apodo, exceptuando los nombres de usuarios registrados. Máximo de 50 caracteres.

Comentar como usuario registrado

Registrarse. ¿Has olvidado tu contraseña?