Home Tips HTML & CSS Tip - Google Fonts API, fuentes no standard en Web

Tip - Google Fonts API, fuentes no standard en Web

Lunes, 24 Mayo 2010 | Escrito por Jhon Marreros Guzman

img google font apiDetalles Tip - Nivel : Básico, Formato : texto y video
Usualmente cuando desarrollamos una página web nos vemos limitados en el uso de las fuentes, algunas técnicas que han surgido para poder superar esto son por ejemplo Cufon (click aqui para ver tip de cufon en monitojoomla), o SIFR; pero recientemente google lanzo su servicio de fuentes para usarlo en nuestras páginas web.

 

El siguiente video muestra el uso del servicio de Google Fonts

Suscribete a monitojoomla en youtube para que puedas ver todos los videos publicados

 

1-De fácil uso

Simplemente se utiliza un link a una fuente particular almacenada en los servidores de Google. Para ver una lista de las fuentes disponibles consultar catálogo de fuentes google. Incluso funciona en IE6, particularmente creo que esto es una gran ayuda a la hora de hacer nuestras páginas web. A continuación se muestra un ejemplo de referencia de una fuente en un archivo html.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
 <head>
 <title>Pagina de Ejemplo - Monito Joomla</title>

 <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
 
 <style>
 h1{
 color: blue;
 font-size: 50px;
 font-family: "Lobster";
 }
 </style>

 </head>    
 <body>
<h1>Hola Mundo</h1>
</body>
</html>

Para más información consultar Google Font Api , también dispones de una herramienta que te permite probar las fuentes en línea google font preview, a continuación tienes la opción de descarga de los archivos de ejemplo, asi como los links de demostración en línea

 

 

 

 

Comparte este postDel.icio.us! Google! Live! Facebook! Twitter! Joomla Free PHP
Comentarios (5)
  • 10-03-2011 Arnolds
    avatar
    Hola Jhon, esta interesante tu web.
    un saludo Desde Colombia.
    Responder
  • 12-04-2011 SeiyaJapon
    avatar
    Hola!
    Muy interesante, pero como lo añades a una página de Joomla 1.6?? Porque es mi caso, pero el único modo que he visto es usar un plugin (HD-GFonts), pero como la estoy prerparando, la tengo en local y no consigo instalarlo (tampoco encuentro ninguna info sobre como instalar un plugin en una pagina de joomla que se tenga en local... es mi primera pagina en Joomla y para una chorrada que quiero hacer me va a costar Dios y ayuda! :S)

    Bueno, un saludo a todos y te repito, muy interesante XD.


    SeiyaJapon.
    Responder
  • 01-07-2011 jesús
    avatar
    NO VALIDA W3, pruébalo

    http://validator.w3.org/check?uri=http%3A%2F%2Fimg.monitojoomla.s3.ama zonaws.com%2Ftips%2Fhtmlcss%2Fart1%2FEjemploApiGoogle.html&charset =%28detect+automatically%29&doctype=Inline&group=0
    Responder
  • 03-07-2011 Jhon Marreros
    avatar
    Hola jesús

    Gracias por la observación, aunque no es precisamente el punto, pero de todas maneras ya lo corregí las etiquetas que tenían problemas.

    Saludos.
    Responder
  • 13-07-2011 Akillerzone
    avatar
    Hola a todos :
    Una duda amigos de monito joomla:
    Google font me funciona perfectamente en los cotenidos ,h1 h2 etc de la página pero Cómo lo hago para aplicar Google fonts a la Font Family de un menu SW MENÚ FREE de la misma página?
    Responder
Escribir comentario
Gravatar enabled