Google Font API con Gradiantes CSS3

css1 Google Font API con Gradiantes CSS3En el pasado mes de mayo de este año, Google lanzó en su congreso de conferencias Google I/O una de las más productivas y útiles APIs de los últimos meses, a la cual se le dio el nombre de Google Font.

Google Font básicamente consiste en una aplicación que permite manejar y utilizar distintos tipos de fuentes de texto o tipografías no convencionales en cualquier sitio Web donde lo deseemos.

Basta con incluir dicha API en nuestro sitio mediante el uso de CSS, y elegir alguna de las fuentes que se encuentran dentro de su librería, la cual lleva por nombre Google Font Directory y se encarga de ofrecer un catalogo de fuentes de alta calidad para que los desarrolladores las puedan usar libremente.

Esta funcionalidad y sencillez de adaptación nos permite darle un toque distinto a nuestras páginas, ahorrándonos el hecho de crear imágenes con texto y/o subir una fuente a nuestro servidor para que el usuario pudiera ver nuestro sitio adecuadamente.

Al mismo tiempo nos permite ir adaptando mejor nuestro sitio a la llamada Web semántica, concediendo que los bots y buscadores puedan acceder a la verdadera información desplegada en nuestro sitio; ya que estaremos usando texto legible y no imágenes para presentarla.

Para hacer uso de esta aplicación y aprovechar sus propiedades, únicamente necesitamos establecer la conexión con la fuente que deseamos utilizar y hacer referencia a ella en el atributo font-family del elemento donde queremos aplicarla.

Por ejemplo, si deseamos utilizar la fuente “Reenie Beanie” en todo el cuerpo de la página que estamos mostrando, entonces simplemente debemos escribir un código como el siguiente:

<html>
<head>
<title> Probando Google font API +  Gradiantes CSS3 </title>
<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>
<style type="text/css">
body { font-family: 'Reenie Beanie', arial, serif; font-size: 100px; }
</style>
</head>
<body>
Tutorial de Google Font API + Gradiantes CSS3
</body>
</html>

Por cuestiones de practicidad incluí el código CSS dentro de mi código HTML, no es incorrecto hacerlo, pero es una mejor técnica de desarrollo tener nuestra hoja de estilo en un archivo único y separado, así si queremos incluir más fonts para diferentes elementos podemos adaptar un código como el siguiente dentro de nuestra hoja:

body { font-family: 'Reenie Beanie', arial, serif;}
h1 { font-family: 'Josefin Sans Std Light', arial, serif; }
li { font-family: 'Tangerine', arial, serif; }

Con esto indicamos que nuestra página tendrá como fuente default la tipografía ‘Reenie Beanie’, los encabezados usarán ‘Josefin Sans Std Light’ y los elementos de las listas harán lo mismo con la font ‘Tangerine’.

Mientras que el código utilizado para establecer la conexión con la API, únicamente variará en el nombre de la fuente que estamos utilizando. Vale aclarar que también podemos utilizar el elemento @import al inicio de nuestro código CSS, para mandar llamar la fuente de la API, en vez de utilizar la etiqueta “link” en el HTML.

@import url(http://fonts.googleapis.com/css?family=Tangerine) es equivalente a <link href=’ http://fonts.googleapis.com/css?family=Tangerine’ rel=’stylesheet’ type=’text/css’>.

Para evitarnos la labor de escribir una línea de código diferente para incluir cada fuente que queremos para nuestro sitio, podemos utilizar un atajo y hacer uso del operador | entre cada nombre, de la siguiente manera:

<link href=' http://fonts.googleapis.com/css?family=Reenie+Beanie|Josefin+Sans+Std+Light|Tangerine' rel='stylesheet' type='text/css'>

Quedando de esta manera el código completo de nuestra página:
<html>
<head>
<title> Probando Google font API +  Gradiantes CSS3 </title>
<link href=' http://fonts.googleapis.com/css?family=Reenie+Beanie|Josefin+Sans+Std+Light|Tangerine' rel='stylesheet' type='text/css'>
<style type="text/css">
body { font-family: 'Reenie Beanie', arial, serif; font-size: 100px; }
h1 { font-family: 'Josefin Sans Std Light', arial, serif; font-size: 30px;}
li { font-family: 'Tangerine', arial, serif; font-size: 15px;}
</style>
</head>
<body>
Tutorial de Google Font API + Gradiantes CSS3
<h1>Encabezado 1</h1>
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
</body>
</html>

Sin duda esto convierte a la API de Google en, hasta el momento, la forma más sencilla de trabajar con fuentes, las cuales pueden ser visibles incluso por navegadores declarados muertos como Internet Explorer 6, es fácil de aplicar y totalmente libre, lo cuál hace prácticamente inevitable usarla, aunque por supuesto esperamos que en un futuro Google Font Directory pueda crecer más, enriqueciendo su base de datos y ponga a disposición de los usuarios una gama más amplia de fuentes para elegir.

Google Font no necesita de transformar objetos, adaptar vectores, ni instalar nada, el resultado que obtenemos siempre será un texto normal, por lo que podemos aplicarle los estilos que cualquier otro texto tiene y puede recibir.

Una de las relativamente nuevas propiedades que dispone CSS3 a través de su paquetería de webkit, son los gradientes para texto, dicho efecto puede ser combinado con Google Font API para obtener un encabezado bastante particular y de buen estilo.

El uso de gradientes produce resultados muy positivos si sabemos donde y cuando utilizarlos, un caso de uso muy común son los encabezados, ya que este efecto los puede hacer resaltar dándoles un gran estilo. La manera de agregar este efecto a un encabezado sería la siguiente:

<html>
<head>
<title> Probando Google font API +  Gradiantes CSS3 </title>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<style type="text/css">
body{
background: #CCC;
}
h1 {
font-family: 'Lobster', arial, serif; /* Agregamos nuestra fuente de Google */
font-size: 100px; /* Le damos de tamaño 100 píxeles */
line-height: 200px; /* Definimos la altura de la línea de texto */
text-shadow: -3px 0px 3px #999; /* Agregamos sombra al texto (posición vertical, posición horizontal, grosor, color )*/
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,.4)));
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
</body>
</html>

Igual que en el primer ejemplo del artículo, incluimos nuestra fuente desde la API de Google, en esta ocasión se escogió la opción de “Lobster” puesto que es una fuente gruesa donde se puede apreciar mejor el efecto del degradado, después pasamos a definir nuestro fondo y las propiedades del encabezado.

Elegimos un tamaño de fuente de 100 píxeles, un tamaño de línea de 200 y agregamos un efecto de sombra para darle mejor presentación al título. En nuestro ejemplo la propiedad “text-shadow” esta compuesta por cuatro parámetros que definen en orden la posición vertical, posición horizontal, grosor y el color de la sombra.

Finalmente con la linea “-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,.4)));” definimos el gradiente de fondo para nuestro encabezado.

Webkit Mask permite aplicar un estilo de máscara a imágenes y elementos, como el gradiente es básicamente una imagen lo incluimos mediante el elemento Webkit gradient, el cual estará compuesto por los parámetros tipo-dirección, posición inicial, posición final y los niveles de opacidad que deseas utilizar.

En nuestro caso indicamos que el gradiente iría de manera linear desde la esquina supeior izquierda hasta la inferior, con un degradado que va desde el color sólido hasta el nivel 0.4 de transparencia.

Con esto obtendremos un encabezado estilizado listo para aplicarse en nuestro sitio web, el cual variará según el fondo que agreguemos en nuestro sitio. Podemos incluir y jugar con otras propiedades para tratar de darle aún mejor presentación, todo dependerá del sitio y el concepto que manejemos.

Para poder realizar un efecto más avanzado se pueden utilizar la propiedad :after de CSS3 y crear una copia que se coloque por debajo de nuestra fuente y actué como parte del degradado, así el fondo pasa a crearse en base al color de la copia y no del fondo de la página.

Escrito por:
ISC Daniel Ernesto Navarro Herrera
OK HOSTING TEAM

¿Deseas ser publicar tu Tutorial o consejo en ARTEgami?

No dudes en ponerte en contacto con nosotros.

Loading Facebook Comments ...

Un comentario “Google Font API con Gradiantes CSS3

  1. Justo lo que estaba buscando. Ya estoy utilizando google fonts, pero tengo un problema. No puedo visualizarlas correctamente en IE8 y IE9, em mozilla se ve muy bien, sabes porque sucede esto? en cuanto a las sombras y gradientes creo que se veria mucho mejor. En este sitio que estoy haciendo les aplique una font de google en el texto de la cabecera y el texto del pie de pagina. http://diezhost.tk Puedes checarlo como se ve en IE y Mozilla..

    Saludos

Comentarios cerrados.