Los desarrolladores/diseñadores web siempre han tenido la limitación en cuanto al uso de tipografías en el diseño web, para lidiar con esto actualmente se utilizan varias alternativas mediante el uso de Javascript e inclusive Flash, Cufón y SIFR por mencionar algunos, pero hoy Google introdujo su Font API y Font Directory en el Google I/O, ofreciéndonos una excelente alternativa para usar nuevas tipografías en web de forma gratuita.
Tipografías en CSS y HTML ¿Cómo funciona?
Existen dos formas de utilizar el Font API:
Método 1:
Simplemente agregamos la siguiente línea en nuestro HTML entre las etiquetas <head>:
Código :
<!-- embebemos la tipografía Tangerine --> <link href="http://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet" type="text/css" />
y en nuestro CSS le aplicamos la propiedad font al elemento que queramos:
Código :
h1 { font-family: 'Tangerine', serif; }En este caso estamos aplicando la tipografía Tangerine que llamamos en el 'link' del HTML a las etiquetas h1.
Método 2:
El otro método sin necesidad de modificar nuestro HTML es hacerlo directamente en nuestra hoja de estilos usando @import:
Código :
@import url('http://fonts.googleapis.com/css?family=Droid+Sans');Y luego en el elemento:
Código :
h2 { font-family: 'Droid Sans', serif; }En este caso estamos aplicando la tipografía Droid Sans que llamamos en el 'import' del CSS a las etiquetas h2.
Mas tipografías:
Para conocer que otras tipografías se pueden utilizar, visiten el directorio de fuentes y elijan la tipografía que más les guste.
Google Web Fonts en acción
La API de Google Fonts esconde una gran complejidad. Por detrás, la infraestructura de Google se encarga de convertir la fuente en un formato compatible con cualquier navegador moderno (como Internet Explorer 6 en adelante) y enviar a nuestra web los caracteres exactos con los estilos que les hayamos definido.
Estas fuentes también funcionan bien con CSS3 y HTML5, incluyendo sombras, rotación, etc. Funcionan de la misma manera que las fuentes locales, facilitando la separación de contenido y presentación.
Si quieren ver esto en acción, una reconocida web ya relanzó su sitio haciendo uso de la tipografía Droid Sans.
Funciona en todos los navegadores, la diferencia es que en algunos se muestra anti-alias y en otros no, en cuanto a navegadores móviles al parecer no funciona por eso es una buena práctica definir una segunda fuente alternativa.
Esto es un gran recurso gratuito para que desarrolladores podamos usar tipografías diferentes sin necesidad de javascript.
Más información
Google Font API
Google Font Directory
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Lamentablemente lo del suavizado es inevitable en cualquier técnica que se pretenda usar, de todas maneras es parte de seleccionar cuidadosamente la fuente que se quiera utilizar.
Yo venia usando font-face en algunas webs, pero a veces se hace algo lento, habra que probar esto a ver.
Por D@rB el 19 de Mayo de 2010
Por oxigeno el 19 de Mayo de 2010
Por _Ju el 20 de Mayo de 2010
Por Inyaka el 20 de Mayo de 2010
no es que me importe demasiado, pero ya sabes
Esto sólo parece ser un fragmento de @font-face. Imagino por como está no funcionara en IE ni en Opera, de ahí en mas... esto no es ninguna revolución o parecido, solo un alojamiento para un montón de fuentes. ¿A alguien mas le recuerda a Google code?
Por oxigeno el 20 de Mayo de 2010
Por Artur el 20 de Mayo de 2010
Saludos!
adrianengine :
Nito y M@U, IE6 en adelante lo soporta. Funciona para todos los navegadores de escritorio.
Por papachan el 20 de Mayo de 2010
Y bueno, me parece que con PHP controlan el CSS enviado a cada cliente, ya que con el codigo mostrado para Firefox (ttf) no funcionaria de otra manera en Internet Explorer o posteriores (eot).
Por No es mas que CSS3 el 25 de Mayo de 2010
Por Kompañero el 29 de Julio de 2010
¡¡Gracias!!
Nota: El único problema es que tarda un poco en cargar, alguna idea de como solucionarlo.
Por jeancgarciaq el 11 de Marzo de 2014
Por krloz1003 el 12 de Octubre de 2015