Ola, somos Arume

Desenvolvemos páxinas web, aplicacións para móbiles, capas de realidade aumentada e aplicacións para Facebook. Apaixónanos a informática e somos uns perfeccionistas incurables; por eso nos nosos proxectos utilizamos estándares.

tel. 625 519 694

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

Autenticarse

Rexistrarse. Esqueceches o teu contrasinal?

Etiquetas

Saltar as etiquetas

Subscríbete ás RSS

Estás en:

  • Inicio >
  • Blog >
  • @font-face: Incrustando tipografías nunha páxina web (revisado)

@font-face: Incrustando tipografías nunha páxina web (revisado)

17 Nov 2011 por Luis

Comentarios: 35

Tipografías

O código CSS que recomendaramos no noso artigo @font-face: Incrustando tipografías nunha páxina web era bo no seu momento, pero a saída de Internet Explorer 9, o aumento de formatos de fonte soportados polos navegadores, así como o descubrimento de que é pouco recomendable usar a instrución local(), fixo necesario actualizar o código para que funcione correctamente na maioría de navegadores, sistemas operativos e servidores.

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

Principais cambios

Vexamos o código antigo:

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

Os principais cambios son:

  • Engadiuse o novo formato de fonte WOFF, o cal suponse vai ser o novo estándar
  • Introduciuse o formato de fonte SVG, para facer o código compatible con iOS < 4.2 (iPhone, iPad)
  • Engadiuse unha nova instrución para cargar o formato EOT.Supúñase que esta era a nova forma de cargar este formato en Internet Explorer xa que o código "?#iefix" solucionaba o erro deste navegador polo cal non cargaba as fontes se no atributo src aparecía algo máis que a URL desta fonte. Con todo, houbo que engadir ó código a liña anterior porque Internet Explorer 9 en modo compatibilidade cas versións 7 ou 8 non acepta esta solución
  • Eliminouse a instrución local() porque facía que o código non funcionase en Android así como nalgunhas configuracións de Linux. Ademais o seu uso foi desaconsellado porque distintas fontes poden ter o mesmo nome

Comentarios

35 comentarios. Comentar.

1. Ezequiel o 24 Nov 2011 ás 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 o 02 Dec 2011 ás 10:01:01

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

3. Des o 15 Dec 2011 ás 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 o 15 Dec 2011 ás 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 o 16 Dec 2011 ás 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 o 16 Dec 2011 ás 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 o 24 Xan 2012 ás 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 o 24 Xan 2012 ás 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 o 19 Mar 2012 ás 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 o 20 Mar 2012 ás 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 o 03 Mai 2012 ás 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 o 03 Mai 2012 ás 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 o 03 Mai 2012 ás 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 o 04 Mai 2012 ás 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 o 04 Mai 2012 ás 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 o 05 Mai 2012 ás 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 o 28 Xul 2012 ás 13:04:13

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

18. Christian o 24 Ago 2012 ás 22:57:48

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

19. Luis o 27 Ago 2012 ás 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 o 25 Out 2012 ás 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 o 25 Out 2012 ás 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 o 05 Nov 2012 ás 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 o 05 Nov 2012 ás 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 o 05 Nov 2012 ás 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 o 15 Nov 2012 ás 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 o 15 Nov 2012 ás 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 o 29 Nov 2012 ás 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 o 12 Xuñ 2013 ás 23:52:03

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

Muchas gracias,

29. Amelie o 02 Out 2013 ás 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 o 02 Out 2013 ás 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 o 28 Out 2013 ás 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 o 19 Xuñ 2014 ás 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 o 05 Mai 2016 ás 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 o 27 Xul 2016 ás 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 o 27 Xul 2016 ás 14:28:54

GRACIAS!!!!!!!!!!

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

Comentar

Comentar de forma anónima

Podes comentar poñendo calquera nome ou alcume, exceptuando os nomes de usuarios rexistrados. Máximo de 50 caracteres.

Comentar como usuario rexistrado

Rexistrarse. Esqueceches o teu contrasinal?