Historial de un navegante

by Angel

Google Font Directory, WebFonts disponibles para todos

leave a comment »

Leído en anieto2k,

Google Font Directory es un repositorio que Google pone a la disposición de todos los desarrolladores donde unificar diferentes fuentes que podremos usar como webfonts en nuestras aplicaciones web.

El directorio, contiene por el momento un número reducido de fuentes disponibles, así comoejemplos de como quedan y obviamente el código necesario para incluirlo en nuestras aplicaciones web.

// HTML
<link href='http://fonts.googleapis.com/css?family=Crimson+Text' rel='stylesheet' type='text/css'>
// CSS
h1 { font-family: 'Crimson Text', arial, serif; }
// @import
@import url(http://fonts.googleapis.com/css?family=Crimson+Text);

Javascript

Paul Irish publica un artículo en el que nos ilustra de las opciones disponibles de Google Font Directory, así como de WebFont Loader, una librería Javascript ideada para trabajar con el repositorio de Google con la colaboración de la gente de TypeKit.

<html>
 <head>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js">
 </script>
 <script type="text/javascript">
 WebFont.load({
 google: {
 families: [ 'Tangerine', 'Cantarell' ]
 }
 });
 </script>
 <style type="text/css">
 .wf-inactive p {
 font-family: serif
 }
 .wf-active p {
 font-family: 'Tangerine', serif
 }
 .wf-inactive h1 {
 font-family: serif;
 font-size: 16px
 }
 .wf-active h1 {
font-family: 'Cantarell', serif;
 font-size: 16px
 }
 </style>
 </head>
 <body>
 <h1>This is using Cantarell</h1>
 <p>This is using Tangerine!</p>
</body>
</html>

Además, nos muestra Font Previewer (con jQuery)

Enlace | anieto2k

Anuncios

Written by Angel Flores

20 mayo 2010 a 22:47

Publicado en google

Tagged with

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: