Posts Tagged ‘fuentes’

Google Font Directory

Viernes, mayo 21st, 2010

El “grande de internet”, nuestro amado y respetado Google, ha puesto en marcha otro proyecto el Google Font Directory, un repositorio de fuentes para que los programadores pueden hacer uso de ellos en la creación de aplicaciones web. De momento sólo hay unas pocas disponibles así como ejemplos de cómo quedan y el código necesario para implementarlo en nuestras páginas web.

La web es esta http://code.google.com/webfonts y aquí algunos ejemplos http://code.google.com/webfonts/family?family=Crimson+Text#specimen

// 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>

Tags: , , , , ,
Posted in General | No Comments »