Foros del Web » Creando para Internet » CSS »

@font-face en FF 3.1 o cómo usar una bonita fuente

Estas en el tema de @font-face en FF 3.1 o cómo usar una bonita fuente en el foro de CSS en Foros del Web. Leo en varios sitios distintos de la web la buena noticia de que Firefox 3.1 ya implementa la propiedad @font-face: o lo que es lo ...
  #1 (permalink)  
Antiguo 13/09/2008, 09:59
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
@font-face en FF 3.1 o cómo usar una bonita fuente

Leo en varios sitios distintos de la web la buena noticia de que Firefox 3.1 ya implementa la propiedad @font-face:
o lo que es lo mismo, nos permitirá utilizar una fuente aunque el visitante no la tenga instalada, ya que se descargará de nuestro sitio.
La forma de definirlo, según veo es la siguiente:
Cita:
@font-face {
font-family: "stencil";
src: url( /*ruta a nuestra fuente en el servidor*/stencil.ttf) format("truetype");
}
/*y definir un elemento con ella, como siempre hacemos:*/
h1 {
font-family: "stencil", sans-serif;
}
para más información:
css3.info

N.B. 1: sólo para windows y mac; linux a la espera
N.B. 2: yo te lo digo, tú lo experimentas.

EDITADO:
Para hacerlo entendible por ie aquí

EDITADO 2:
Y aquí un tuto (mini) para utilizarla, también con ie y sus .eot
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 20/09/2009 a las 11:16 Razón: Enlazar tutorial para
  #2 (permalink)  
Antiguo 13/09/2008, 11:26
Avatar de kazafun  
Fecha de Ingreso: diciembre-2003
Ubicación: Elda
Mensajes: 843
Antigüedad: 14 años
Puntos: 13
Respuesta: @font-face en FF 3.1 o cómo usar una bonita fuente

Es una noticia grande, muy grande. Ya era hora. Ahora a esperar que IE8 tambien lo haga y un problema que nos quitamos.
__________________
MUERTE a Internet Explorer


Mi portfolio de diseño web en Elda
  #3 (permalink)  
Antiguo 14/09/2008, 03:11
 
Fecha de Ingreso: mayo-2007
Mensajes: 348
Antigüedad: 10 años, 6 meses
Puntos: 9
Respuesta: @font-face en FF 3.1 o cómo usar una bonita fuente

Impresionante!
  #4 (permalink)  
Antiguo 06/11/2008, 12:06
Avatar de sergio87  
Fecha de Ingreso: octubre-2007
Ubicación: Buenos Aires
Mensajes: 323
Antigüedad: 10 años, 1 mes
Puntos: 8
Respuesta: @font-face en FF 3.1 o cómo usar una bonita fuente

si, me parece perfecto eso, aunque la contra seria que si se implementa eso, las webs que visitemos van a tener muchas de fuentes no usuales, y va a tardar en cargar el sitio y se va a colgar todo

.. creo que esto seria una contra.

saludos!
  #5 (permalink)  
Antiguo 06/11/2008, 12:13
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: @font-face en FF 3.1 o cómo usar una bonita fuente

El tema ya está actualizado aquí: http://www.forosdelweb.com/f53/fuent...ara-ie-641008/

Por supuesto, esto debe ser usado con moderación. Quedaría bien para los h#
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #6 (permalink)  
Antiguo 06/11/2008, 13:12
Avatar de sergio87  
Fecha de Ingreso: octubre-2007
Ubicación: Buenos Aires
Mensajes: 323
Antigüedad: 10 años, 1 mes
Puntos: 8
Respuesta: @font-face en FF 3.1 o cómo usar una bonita fuente

por eso decia, no abusar con esto nuevo, sino se va a colgar todo! jajajaja

a lo sumo una fuenta en el h1 y gracias!
  #7 (permalink)  
Antiguo 10/11/2008, 19:40
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Respuesta: @font-face en FF 3.1 o cómo usar una bonita fuente

mmmm todavía no sé si es para alegrarse o ponerse a pensar
  #8 (permalink)  
Antiguo 03/12/2008, 09:17
 
Fecha de Ingreso: enero-2008
Mensajes: 133
Antigüedad: 9 años, 10 meses
Puntos: 1
Respuesta: @font-face en FF 3.1 o cómo usar una bonita fuente

No me funciona que hago mal?

Código HTML:
<style type="text/css" media="screen">
h1 {
font-family:"fiery";
}
@font-face{
font-family:"fiery";
src: url("../IMAGENES/Fiery_Turk.ttf") format("truetype") ;
}
</style>

/* PARA INTERNET EXPLORER*/

<![if IE]>
<style type="text/css" media="screen">
@font-face{
font-family:"fiery";
src: url("../IMAGENES/Fiery_Turk.eot");
}
</style>
<![endif]
</head> 
espero sus respuestas gracias
  #9 (permalink)  
Antiguo 25/02/2010, 16:40
 
Fecha de Ingreso: septiembre-2007
Mensajes: 12
Antigüedad: 10 años, 2 meses
Puntos: 0
Respuesta: @font-face en FF 3.1 o cómo usar una bonita fuente

Pues yo tengo una broncata lo unico que necesito es montar una fuente que tengo en el server para que cualquier usuario con cualquier navegador la vea pero no lo logro aqui todos los ejemplos pero minguno a funcionado solo el primero pero tuve que cargar la fuente manual mente a mi equipo SO que uso linux.

Esqpero que alguien haya ya echo un ejemplo y me puedan echar una mano la verdad llevo mucho tiempo buscando pero nada

Código:
@font-face
{ 
   font-family: calibri;
   src:url(//:) format("No-IE-404"), url('http://solteci1/SFWT/fonts/calibri.ttf') format("truetype");       
}
Este funciona en linux si monto la fuente a mi equipo osea que no tiene sentido
y todos estos son los que he encontrado pero ninguno a funcionado
Código:
@font-face {   
	font-family: 'calibri';
	src: url('calibri.eot');
	src:url(//:) format("No-IE-404"),url('fonts/calibri.woff') format('woff'), url('fonts/calibri.ttf') format('truetype'), url('fonts/calibri.svg#Calibri') format('svg');
	src: local('Calibri Regular'), local('Calibri'), url('fonts/calibri.woff') format('woff'), url('fonts/calibri.ttf') format('truetype'), url('fonts/calibri.svg#Calibri') format('svg');

}
otro
Código:
@font-face
{ 
   font-family: calibri;
   src:url(//:) format("No-IE-404"), url('http://ventgas/SSFF/fonts/calibri.otf') format("opentype");       
}
otro.
Código:
@font-face {   
	font-family: 'calibri';
	src: url('fonts/calibri.eot');
	src: local('Calibri Regular'), local('Calibri'), url('fonts/calibri.woff') format('woff'), url('fonts/calibri.ttf') format('truetype'), url('fonts/calibri.svg#Calibri') format('svg');
}
por mcierto cuando valide mi css me marco este error

La propiedad src no existe : url("http://www.mipagina.com/wis/fonts/calibri.ttf") format("truetype") url("http://www.mipagina.com/wis/fonts/calibri.ttf") format("truetype")

lo hize en la pagina de Servicio de Validación de CSS del W3C

otro

Código:
@font-face
{ 
   font-family: calibri;
   src:url('//:') format("No-IE-404"), url('http://ventgas/SSFF/fonts/calibri.ttf') format("truetype");       
}
otro
Código:
@font-face
{ 
   font-family: 'calibri';
   src:url(//:) format("No-IE-404"), url(onts/calibri.ttf) format("truetype");       
}
come veran ya hize todas las posibilidades con comas sin comas con espacios con apostrofes y nada por eso es que me acerco con ustedes que muchas veces ya han tenido esas complicaciones gracias de antemano y espero que esto sirva a algunos

en otra pagina encontre tambien que mi servidor tenia que tener esta configuracion
Código HTML:
<FilesMatch "\.(ttf|otf)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch> 

tambien dejo este link aqui pude convertir a tipos de fuentes svg ttf odt woff para diferentes navegadores pero tampoco . es muy buen generador
Código HTML:
http://www.fontsquirrel.com/fontface/generator
y estos son algunos de los links que use

https://developer.mozilla.org/en/CSS/@font-face
http://readableweb.com/mo-bulletproofer-font-face-css-syntax/
http://www.zeldman.com/2009/12/02/bulletproof-font-face/
http://typophile.com/node/63992
http://forums.matrix.squiz.net/index.php?showtopic=6791&st=15
http://markmail.org/message/ytlqhvoyk6dyzxvl
http://readableweb.com/mo-bulletproofer-font-face-css-syntax/
http://www.w3.org/TR/css3-fonts/
https://developer.mozilla.org/en/CSS/@font-face
http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/
http://home.tiscali.nl/developerscorner/fdc-varia/font-embedding.htm
http://www.cssblog.es/sintaxis-de-font-face/
http://nova-group.se/test/fonts/
etc...

bueno pues aquí dejo todo esto y haber si alguien pudiera echarme la mano
gracias de antemano
  #10 (permalink)  
Antiguo 25/02/2010, 19:39
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: @font-face en FF 3.1 o cómo usar una bonita fuente

Hola alfdixi, justamente estamos debatiendo el tema junto a gerangel en este hilo. Aquí tienes un demo funcionando, he comprobado que funciona en ff, chrome, ie y opera (¿puedes probarlo en safari y me cuentas?) todos sobre windows, puedes hacer tus pruebas en linux y ver si te sirve. Si te interesa el partido no tendré problemas en explicarte como lo hice.

Ah, trata de usar el buscador del foro asi no revives temas viejos. No es nada personal sino que es buena costumbre no hacerlo.

Saludos!
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:15.