Fuentes personalizadas en nuestros proyectos web: Google Web Fonts y CSS3

A la hora de trabajar en el diseño y desarrollo de nuestra web nos encontramos con el problema del limitado número de fuentes que podemos utilizar por la falta de seguridad de que nuestros usuarios las tengan instaladas en sus equipos. Vamos a ver a continuación dos soluciones que nos permiten usar fuentes personalizadas en nuestros proyectos.

Google Web Fonts

Google Web Fonts es un repositorio de fuentes open source optimizadas para web. El modo de empleo es muy sencillo, sólo hay que seleccionar las fuentes que nos interesan y añadir a nuestra web el código que nos genera. Veamos un ejemplo:

<html>
    <head>
        <title>Google Web Fonts</title>
        <link href='http://fonts.googleapis.com/css?family=Sevillana' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <p style="font-family: 'Sevillana'; font-size: large">Ejemplo de uso de Google Web Fonts.</p>
    </body>
</html>

CSS3

CSS3 nos permite utilizar cualquier fuente mediante la declaración @font-face. Debemos declarar el nombre de la fuente y su ubicación en el servidor y ya podremos utilizarla como cualquier otra fuente en nuestro proyecto web:

<html>
    <head>
        <style type="text/css">
            @font-face {
                font-family: myFont;
                src: url(fonts/TunaAndHotDogsOnRye.eot);
                src: url(fonts/TunaAndHotDogsOnRye.ttf) format("truetype");
            }
        </style>
    </head>
    <body>
        <p style="font-family: 'myFont'; font-size: large">Ejemplo de carga de fuentes con CSS3.</p>
    </body>
</html>

En las pruebas realizadas, con las últimas versiones de Mozilla Firefox y Google Chrome se ha cargado correctamente la fuente con formato ttf. Sin embargo, en Internet Explorer 9 no ha funcionado. En este momento, la línea 6 es obligatoria para la compatibilidad con IE, que sólo soporta el formato eot (Embedded Open Type) propietario de Microsoft.

Para ayudarnos con la conversión del formato ttf a eot, tenemos a nuestra disposición la herramienta open source ttf2eot.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *