Jueves 23 de Febrero, 2012
Dinvaders: Alimentando con código a nuestros hambrientos visitantes desde el año 2010.

Trucos CSS: poner fuente personalizada en tu página con CSS

El diseño web va ganando más herramientas para personalizar nuestras web y podamos darle ese toque artistico y fuera de lo cotidiano, en este caso, gracias al gigante de internet (Google), que nos acerca una gran utilidad como es salir de las clásicas fuentes como Tahoma, Verdana, Arial, etc para entregarnos unas hermosas fuentes para que las usemos sin problema en nuestro sitio como alternativa al código @font-face

¿Cómo funciona?

Es simple, entramos a Code Google y se nos presentará una lista con las fuentes disponibles. En nuestro caso clickeamos en la fuente Lobster.

Se nos abrira una página y nos encontraremos con esto:

Pueden ver que hay 4 pestañas, para obtener el código para insertar en nuestra página deberemos clickear en “Get the code”

Ya ahi nos dará dos códigos, el primero deberemos colocarlo en nuestro <head>



<link href=’http://fonts.googleapis.com/css?family=Lobster’ rel=’stylesheet’ type=’text/css’>

El segundo lo llamaremos en nuestro CSS como si fuera una fuente normal:



h1 { font-family: ‘Lobster’, arial, serif; }
Importante! si quieren agregar más de una fuente como por ejemplo Tangerine, Inconsolata y Droid Sans deberán colocar la dirección de la siguiente manera:
“http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans”

¿Sencillo no?

Disfruten este truco y no olviden comentar ;)

Artículos relacionados

Este artículo tiene 5 comentarios

  1. Paco, hace 431 días atras:

    Hola, ahora que ha cambiado el CSS y ya no existe font-face… ¿Cómo puedo poner mi fuente personalizada?

    Gracias.

  2. German - clases de salsa, hace 394 días atras:

    Hola, muy interesante este hack para las fuentes. Muy sencillo de implementar.

  3. H3Rn@n, hace 371 días atras:

    Hola y Saludos, me tope por casualidad con tu página y la verdad esta muy completa, y buscando trucos para css pues me topo con este y la verdad…..WooW, me encanta este truco porque la verdad es algo feo y tedioso tener que meterle la misma tipografia tipica y fea de Arial Tahoma etc., pero Gracias a Google eso ya no mas. Y bueno muchas Gracias por no retener el conocimiento. Saludos!:

  4. Source, hace 366 días atras:

    Hola Hernan, muchas gracias, nos alegrate que te haya gustado nuestra pagina y nuestro material, proximamente estaremos teniendo novedades.

    Saludos

  5. Vangelis, hace 18 días atras:

    En internet explorer 9 no funciona

Deja un comentario