Hoy quería explicar algo de Cufón, aquel JavaScript que es capaz de mostrar en una página web tipografías que no están instaladas en el computador de la persona que visita la página. Pero al momento de empezar a realizar el tutorial, conocí @font-face (y si que lleva bastante tiempo, y no lo conocia).
Bien @font-face hace lo mismo que Cufón, pero de manera mejorada y más mucho más simple. Como ya dije @font-face es una propiedad muy útil para definir en un sitio web una fuente que el usuario no tenga instalada en su ordenador. Sólo debemos subir la fuente deseada a nuestro sitio web (mediante un cliente FTP, al servidor) y definirla mediante CSS. ¿Te interesa? Bien, sigamos…
Primer Paso: La Selección de la Fuente Apropiada
La idea es que podemos usar cualquier fuente, sin embargo, hay algunas consideraciones que tenemos que hacer antes de elegir una fuente para nuestra página:
1- Fuente gratuita: No queremos violar alguna ley de derechos sobre las fuentes así que primero lee si estas en la posibilidad de usarla para tu web. Para ello existen una gran cantidad de páginas gratuitas para conseguir (de hecho yo en antiguos post hice una selección de buenas tipografías gratuitas como “14 Tipografías para tener en la colección” o “Cinco simples y correctas tipografías gratuitas” ademas también tenemos a Dafont.com).
2- Fuente debe estar ompleta: Cuando digo completa me refiero a que tenga signos de puntuación, números, la Ñ y los acentos obviamente.
3- Fuente agradable a la vista: No es bueno usar fuentes muy complicadas de leer ya que esto jugaría en contra en lugar de darle una buena vista a tu sitio.
Segundo Paso: Conociendo @Font-Face
Una vez tengas la fuente descargada en tu pagina vamos a ir a el Sitio Oficial de @Font-Face para utilizar un generador automático de archivos .otf y .ttf que son los necesarios para vincularlos vía css con la propiedad @font-face. Una vez en esa pagina hacemos clic en “Add Fonts” y seleccionamos la fuente que queramos.
Una vez cargue tu fuente, selecciona el modo “Expert” las opciones que están marcadas en la imagen:
Luego debes hacer click en Advanced Subsetting… te van a salir unas opciones que debes configurarlas de la siguiente manera:
Ahora solo queda bajarlo.
Tercer Paso: Instalandolo en tu Sitio
Una vez que descomprimas el archivo que descargaste, sube todas las fuentes a la carpeta de tu web:
Luego para usar tu fuente en cualquier página de tu web solo tienes que agregar el siguiente código en tu estilo CSS
@font-face {
font-family: 'HarabaraBold';
src: url('harabara.eot');
src: local('Harabara'), local('HarabaraBold'), url('harabara.woff') format('woff'), url('harabara.ttf') format('truetype'), url('harabara.svg#') format('svg');
}
*Debes tener cuidado con que la ubicación de los archivos de tu fuente sean los correctos, por ejemplo harabara.eot o si las fuentes las subes a una carpeta llamada “fuentes” algo como fuentes/harabara.eot
Con eso ya puedes darle a cualquier elemento de tu web el tipo de fuente deseado, por ejemplo para los títulos H1 solo tienes que hacer lo siguiente en tu CSS:
h1 {
font-family: 'HarabaraBold';
}
Con esto definimos que H1 es el titulo que usara la tipografía ocupada en @font-face, lo cual puede ser cambiada por el que ustedes deseen.
Importante tener en cuenta
Ventajas:
- Contenido jerarquizado y ordenado.
- Se pueden dar estilos CSS.
- Se puede copiar el texto directamente al portapapeles.
- El texto es traducible, mediante la traducción en el navegador u otros servicios de traducción.
- El texto puede ser localizado mediante búsquedas (Ctrl-F ).
Desventajas:
- Sólo compatible con navegadores con soporte CSS3. Ver tabla de compatibilidad:
