Se lee en 2 minutos

Seguramente ya habrás usado en múltiples ocasiones las Google Fonts. En este tutorial vamos a ver cómo mediante la API de Google Fonts se pueden añadir además efectos CSS para Google Fonts. Para ello lo primero que haremos es importar la Google Font que queramos usar. En este ejemplo usaremos “Damion“:

 

Hasta aquí nada nuevo. Para importar además alguno de los efectos disponibles, tendremos que añadir el parámetro “effect” e indicarle el nombre del efecto que queremos usar. En nuestro ejemplo vamos a usar el efecto “emboss“. El código anterior entonces quedaría así.

 

Ahora sólo tenemos que crear algún elemento HTML al que aplicarle el efecto. Vamos a crear un párrafo en el “body” y aplicarle la clase correspondiente. Sería algo así:

 

El nombre de la clase será siempre “font-effect” y sólo tendremos que añadirle un guión (-) y el nombre del efecto, (“emboss”) en este ejemplo.

Como puedes apreciar en el ejemplo que he creado, algunos efectos incluyen texturas como madera, ladrillos…que podrían sernos útiles en algún caso. Si quisiéramos aplicar más de un efecto en nuestra página (por ejemplo a otro párrafo distinto) tendríamos que añadir el símbolo “pipe” ( | ) después del nombre del primer efecto y escribir el nombre de otro u otros efectos que quisiéramos tener disponibles. Para que quede totalmente claro:

 

Por supuesto, podemos mediante CSS cambiar el tamaño del texto, color, alineación, etc. tal y como haríamos con cualquier otro texto de nuestra página. Lo interesante es experimentar, tratando de modificar por ejemplo los colores de texto que traen algunos efectos.
A continuación tienes un listado con todos los efectos disponibles (todos ellos son compatibles como mínimo con versiones nuevas de Chrome y Safari):

  • font-effect-anaglyph
  • font-effect-brick-sign
  • font-effect-canvas-print
  • font-effect-crackle
  • font-effect-decaying
  • font-effect-destruction
  • font-effect-distressed
  • font-effect-distressed-wood
  • font-effect-emboss
  • font-effect-fire
  • font-effect-fire-animation
  • font-effect-fragile
  • font-effect-grass
  • font-effect-ice
  • font-effect-mitosis
  • font-effect-neon
  • font-effect-outline
  • font-effect-putting-green
  • font-effect-scuffed-steel
  • font-effect-shadow-multiple
  • font-effect-splintered
  • font-effect-static
  • font-effect-stonewash
  • font-effect-3d
  • font-effect-3d-float
  • font-effect-vintage
  • font-effect-wallpaper

 

Puedes ver cómo quedan todos estos efectos en http://tonalidad.es/html5/efectos_google_fonts/

Si quieres leer más tutoriales, estar al tanto de más trucos, recursos, ideas, recomendaciones, etc. Suscríbete a tonalidad.es por correo electrónico.