Poner la fuente que quieras en tu pagina Web Leido 12.732 veces

 
  Broco
Ha recibido:
4 premios
Bueno hay varios problemas a la hora de elegir una buena fuente para tu web, mas que nada por que para que funcione la tiene que tener el usuario instalada esto es un gran problema la hora de diseñar.
pero hay una forma de meter la fuente en la web sin necesidad que el usuario la tenga, para ello tenemos que llamar a la fuente con @font-face con css, pero hay un gran problema que es que FireFox,safari,chrome solo leen fuentes .ttf y IE solo lee .eot, lo único que tenemos que hacer es descargarnos nuestra fuente .ttf de cualquier pagina de descargas de fuentes
y convertirlas a .eot conservando la .ttf evidentemente, una vez tengamos la fuente .ttf vamos a http://ttf2eot.sebastiankippe.com/ y desde ahí la convertimos a .oet.
Lo que tenemos que hacer es subir las 2 fuentes (.eot y ttf) a nuestro servidor .

Bien ya tenemos la fuente en este caso la mía se llama mifuente.ttf y mifuente.eot por lo que usare este codigo:



<style>
@font-face {
font-family: mifuente1;
src: url('http://dominio.com//mifuente.ttf');
}
@font-face {
font-family: mifuente2;
src: url('http://dominio.com//mifuente.eot');
}
</style>


Hay que destacar 3 cosas:
1. El enlace tiene que ser completo si ponemos /mifuente.ttf no funcionara, es necesario la URL completa.
2. Hemos metido 2 fuentes por que el navegador primero intentara poner una y si no puede aplicarla pondrá la otra.
3. En font.family emos puesto el nombre que seria "mifuente2 o mifuente1", esto sirve para decirle al navegador que fuente queremos que use, le decimos el nombre y listo

Para decirle al navegador que si no funciona una fuente osea la otra se utiliza una coma, un ejemplo:



<span style="font-family:mifuente1,mifuente2">Hola Mundo</span>


Como veis he puesto (font-family:mifuente1,mifuente2) la coma es como si fuese una O, le dice ponme mifuente1 o mifuente2...
Bueno espero que os haya servido ;-)

 

 





  Jesús
Muy buen artículo Broco, hacer que funcione en los 3 principales navegadores es muy importante, creo que lo usaré cuando llegue el momento :-)
+K

 

 


  tutykeN1
Ha recibido:
3 premios
muy bueno +k
 

 





    ¿Cuantas columnas?     | 2 columnas | 3 columnas | 4 columnas | 5 columnas | 6 columnas |  
    Escribe la dirección web de la imagen:
  Publica tu respuesta  |  Haz Click en el siguiente cuadro para escribir