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í como ejemplos 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) 😀
En la vida como en LOST, no todo es malo ni todo es bueno. Ni Google es lo peor del mundo ni es el salvador que todosesperabamos, pero hay días en los que lo parezca 😀
13 comentarios, 4 referencias
+
#