Fuentes personalizadas con css3 y Google Fonts

Con CSS3 tenemos la posibilidad de utilizar tipos de fuentes personalizadas, fuentes que hacen mucho más atractivos los diseños de nuestras Webs así como ahorrarnos el tener que hacer imágenes cuando queremos poner un texto con un tipo de fuente especial.





Mediante CSS3 podemos hacerlo de la siguiente forma:

@font-face {
    font-family: 'Mifuente';
    src: url('fonts/mifuente.eot');
    src: local('fonts/mifuente'), 
    url('fonts/mifuente.woff') format('woff'), 
    url('fonts/mifuente.otf') format('opentype'), 
    url('fonts/mifuente.svg#mifuente') format('svg');
}

h1 {font-family: Mifuente, Arial, Verdana;}

Primero cargamos nuestro archivo de fuente mifuente.eot, para Internet explorer, y los demas archivos de fuentes según el navegador; especificando su ruta y asignándosela al nombre de fuente Mifuente. Posteriormente aplicamos la fuente Mifuente a los elementos h1.

Como veis, se necesita la fuente que queremos utilizar en varios formatos. Podemos conseguir los distintos formatos, a partir de una fuente ttf mediante el Font Face Generator de FontSquirrel, además nos generará un archivo css con el código necesario para usar la fuente.

Muy sencillo y podemos aplicar el tipo de fuente que deseamos. Pero claro, esto solo es válido para los navegadores que tienen soporte CSS3. Una forma alternativa y con la que de momento nos tenemos que conformar si queremos emplear fuentes personalizadas y que se vean en todos los navegadores, es mediante Google Fonts.

Google Fonts es otra de esas herramientas que Google pone ha disposición de los desarrolladores. Entrando en su Web y mediante dos sencillos pasos podemos, eligir un tipo de fuente de entre su banco de fuentes gratuitas y obtener el codigo necesario para emplearla.

Por ejemplo, selecciono el tipo de fuente Kaushan, copio el siguiente código que me facilita Google Fonts:

<link href='http://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
...
h1 {font-family: 'Kaushan Script', cursive;}

El ejemplo en funcionamiento:

Un texto con fuente personalizada con Google Fonts