Nosequeponer » fuentes http://www.nosequeponer.com/blog Ocio en general, análisis y noticias de Videojuegos Sat, 04 Feb 2012 20:01:21 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Google Font Directory http://www.nosequeponer.com/blog/google-font-directory/ http://www.nosequeponer.com/blog/google-font-directory/#comments Fri, 21 May 2010 15:34:29 +0000 admin http://nosequeponer.com/blog/?p=1046 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>
]]> http://www.nosequeponer.com/blog/google-font-directory/feed/ 0