Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Usa cualquier Fuente que quieras en tu web
#1
Como estoy entre diseñadores gráficos me están enloqueciendo con las tipografías y tuve que hallar un método para incluirlas en los diseños web.
mi sorpresa fue que no es tan complicado hacerlo, copio y pego un articulo muy interesante al respecto y espero que les sea útil.

Cita:Existen una lista de tipografías estándares que todos los navegadores pueden interpretar, pero, ¿qué ocurre con las demás tipografías? ¿Cómo podemos implementarlas?

@font-face es una propiedad muy útil para definir en un sitio web una fuente que el usuario no tenga instalada en su ordenador. Sólo debemos subir la fuente deseada a nuestro sitio web (mediante un cliente FTP, al servidor) y definirla mediante CSS.

La fuente debe ser definida por la regla @font-face, además de la clase en la que la vayamos a usar.

Para el tipo de fuente, puede usarse en formato OpenType (.otf) o bien, en formato Truetype (.ttf).
Cómo implementar @font-face

Vamos a aplicarle la tipografía “Kimberley” en un encabezado H1, como ejemplo de Alistapart. Así funciona:


Código:
1. @font-face {  
   2. font-family: "Kimberley";  
   3. src: url(http://www.princexml.com/fonts/larabie/ »  
   4. kimberle.ttf) format("truetype");  
   5. }  
   6. h1 { font-family: "Kimberley", sans-serif }  
   7. @font-face {  
   8.  
   9. font-family: "Kimberley";  
  10.  
  11. src: url(http://www.midominio.com/fuente/kimberle.ttf) format("truetype");  
  12.  
  13. }  
  14.  
  15. h1 { font-family: "Kimberley", sans-serif }  

@font-face {
font-family: "Kimberley";
src: url(http://www.princexml.com/fonts/larabie/ »
kimberle.ttf) format("truetype");
}
h1 { font-family: "Kimberley", sans-serif }
@font-face {

font-family: "Kimberley";

src: url(http://www.midominio.com/fuente/kimberle.ttf) format("truetype");

}

h1 { font-family: "Kimberley", sans-serif }
Obviamente, debemos ubicar la dirección donde se encuentra la tipografía que deseemos definir en nuestro sitio, en este caso, “Kimberley”.

Si tenemos una larga lista de fuentes propias, podemos usar @import:


Código:
1. @import url(http://www.midominio.com/style/index.css) all;  
   2.  
   3. h1 { font-family: Goodfish, serif }  

@import url(http://www.midominio.com/style/index.css) all;

h1 { font-family: Goodfish, serif }
Y ya está. @font-face está soportada por Safari 3+ y 4+, Firefox 3.5, e Internet Explorer 7+.

Una imagen de Internet Explorer 7+ aplicando @font-face:

font-face-Internet-Explorer-7
Problemas con Internet Explorer 6+

Si deseemos aplicar @font-face en Internet Explorer 6+, sin usar formato “.otf”, debemos aplicar comentarios condicionales, además del que tengamos para los navegadores modernos (compatibles con @font-face, los listados en el anterior párrafo). El código a definir para Internet Explorer 6+ es este:


Código:
1. <!--[if IE]>  
   2.  
   3. <style type="text/css" media="screen">  
   4.  
   5. @font-face{  
   6.  
   7. font-family:'Fontin-Regular';  
   8.  
   9. src: url('Fontin-Regular.eot');  
  10.  
  11. }  
  12.  
  13. </style>  
  14.  
  15. <![endif]-->  

<!--[if IE]>

<style type="text/css" media="screen">

@font-face{

font-family:'Fontin-Regular';

src: url('Fontin-Regular.eot');

}

</style>

<![endif]-->

Para convertir fuentes .ttf a .eot, por ejemplo, podemos usar WEFT 3.

Por mi parte agrego que es simple, salvo cuando uno quiere convertir una fuente en eot para que la vea el ie ya que solo fuentes libres pueden ser convertidas a este formato.
Aquí un Demo

Tutorial Original por: Hertak
[Imagen: bann.png]
WWW
#2
Interesante solución, lo probaré seguro, me ha gustado mucho la fuente Diavlo del ejemplo que expusiste. Un gracias como un piano
"Todos somos ignorantes, lo que ocurres es que no todos ignoramos las mismas cosas"
#3
esta muy bueno cuando monte mi web lo voy a probar
#4
Gracias por el dato, me servira de algo, saludos.
WWW
#5
Hmm... a esto le sacaré provecho. Muchas gracias!
#6
Gracias por el aporte, podremos terminar de dar el toque deseado en nuestra web/foro
#7
Muchas gracias por este aporte, muy util.

No se que hubiera hecho sin vos.

Besos,
Elvira.Sonrisa
#8
Funcionará esto en Chrome?
#9
(03-07-2012, 01:49 PM)asprocet escribió: Funcionará esto en Chrome?

Tengo entendido que si
WWW
#10
Uhm... es bueno ver los usos de los css para lograr estas cosas. Thanks!


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  [PHP] Código Fuente torgar22 1 211 26-12-2014, 09:15 PM
Último mensaje: d0rag0n
  [Duda] Abrir enlace al dar click en cualquier sitio Tamatsipatse 1 360 22-11-2014, 08:26 PM
Último mensaje: AbaddonOrmuz
  Diseñadora de Logos, Banners y Cualquier Imagen, Diseños al gusto. likeycomparte 0 241 30-09-2014, 08:30 AM
Último mensaje: likeycomparte
  Auto Like para cualquier Web Configurable mikl111 1 697 19-08-2013, 01:46 AM
Último mensaje: niqo
  Protege tu codigo de fuente DeeRz 26 1,963 05-02-2013, 03:28 PM
Último mensaje: andrex.nava
  Tutorial de como Poner rss de cualquier lugar de tu webweb Sergio Fg 8 1,706 01-12-2012, 04:09 PM
Último mensaje: Drod
  Degradados en CSS de cualquier color rubenamc25 3 889 25-02-2012, 02:15 AM
Último mensaje: DjLucho
  [Tutorial] C# Indizadores. Accedé a cualquier Archivo con este Tutorial Postteandox 0 1,250 21-11-2011, 01:13 AM
Último mensaje: Postteandox
  Cual fuente me recomiendan tuweveryomorro 1 530 11-10-2011, 02:48 PM
Último mensaje: Sandro



Usuarios navegando en este tema: 1 invitado(s)