google font api por fin podemos usar en html cualquier tipo de fuente o tipografia

Gracias a google se acabo usar siempre para tus desarrollos web las tipografias estandar que vienen instaladas en el sistema operativo de tu pc

En Google Font Directory podemos visualizar todas las fuentes disponibles

Implementar una tipografía de Google Web Fonts en nuestra página web

Una vez seleccionada la tipo que quieres, para configurarla en tu páginas web, Google nos ofrece tres formas distintas:

1. Stantdar: A través de la etiqueta Link, como cualquier otro estilo css, (dentro de las etiquetas head de la página web).

<link href="http://fonts.googleapis.com/css?family=Fuentes+Escogidas+Google" rel='stylesheet' type='text/css'>

2. @import: Haciendo un include de la fuente directamente en el archivo de estilos css (ejemplo style.css).

@import url(http://fonts.googleapis.com/css?family=Fuentes+Escogidas+Google);

3. Javascript: A través de un script de javascript (dentro las etiquetas head de la página web).

<script type="text/javascript"><!--
  WebFontConfig = {
    google: { families: [ &prime;Fuentes+Escogidas+Google&prime; ] }
  };
  (function() {
    var wf = document.createElement(&prime;script&prime;);
    wf.src = (&prime;https:&prime; == document.location.protocol ? &prime;https&prime; : &prime;http&prime;) +
      &prime;://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js&prime;;
    wf.type = &prime;text/javascript&prime;;
    wf.async = &prime;true&prime;;
    var s = document.getElementsByTagName(&prime;script&prime;)[0];
    s.parentNode.insertBefore(wf, s);
  })();
// --></script>

Para usar la fuente o tipografía seleccionada e implementada, solamente hay que indicarlo en la propiedad Font-family:

h1 { font-family: 'Metrophobic', Arial, serif; font-weight: 400; }
Anuncios

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