Comunidad de diseño web y desarrollo en internet online

Usa cualquier fuente en CSS y HTML con el Font API de Google

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.

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate