» Publicación:
31 enero 2011
/
Categoría:

Con @Font-Face tú web con tipografía personalizada

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

*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:

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:

  • Facebook
  • Twitter
  • Delicious
  • Tumblr
  • Google Buzz
  • StumbleUpon
  • Digg
  • Technorati
  • Netvibes
  • Windows Live
  • Reddit
  • LinkedIn
  • Google Bookmarks
  • E-Mail
» Sobre el autor: Reckless
Joven chileno de 29 años, con un paso por la escuela de Ingenieria de la UNAB, que dejo a medio camino para tomar la carrera de Diseñador Gráfico Profesional en la Universidad Santo Tomás, que era lo que siempre busco desde los 12 años. Fanático de la Universidad de Chile, el Metal y el Hardrock. Actualmente trabajando como Diseñador & Desarrolador Web para Especiales de Emol.com, ademas de "Freelancear" cuando se puede.
Comentarios

Articles like this really grease the shafts of knoewedgl.

Fecha del comentario: 26 julio 2016 a las 1:38

Not anyone doubts, just the masses of sheeple making up most of the USA population. They don’t know any better, and our MSM makes sure that is so.

Fecha del comentario: 6 noviembre 2016 a las 21:58

Thank you for sharing excellent informations. Your website is very cool. I’m impressed by the details that you have on this website. It reveals how nicely you understand this subject. Bookmarked this web page, will come back for more articles. You, my pal, ROCK! I found just the info I already searched all over the place and simply could not come across. What an ideal website.

Fecha del comentario: 15 noviembre 2016 a las 6:56

Thank you so much Crista-Lee!!! Having you be a part of our day was so special. I knew right off the bat that flying you in from Nova Scotia was the best choice we could have made because your positive, enthusiastic personality infused our wedding day with so much love and energy! I LOVE all these photos, especially the one with Nadia, Cassie, Maia, and me in the makeout corner! And the one you got of me and PJ laughing together, and Jessie munching on that shortbread cookie! So many wonderful cherished memories… THANK YOU!!!

Fecha del comentario: 9 enero 2017 a las 12:25

I so deeply appreciate even the time you took to write this. My most recent poem may be somewhat upsetting; I think you recently interviewed Mary Crow, a former friend and mentor with whom very hard things have happened in recent years. I hope that isn’t off-putting and don’t worry: saying that you see me means the world because at the moment i have difficulty seeing myself… I think you understand…. xj

Fecha del comentario: 5 febrero 2017 a las 15:43

am si eu o mare nelamurire: l-am luat o data a mers. acuma cand l-am luat iar nu-mi mai arata nicio arhiva, dar chestia e ca nici in programfiles nu-mi arata nicio arhiva…ma ajuta si pe mine cineva???..va roooooooooog

Fecha del comentario: 8 febrero 2017 a las 20:42
Escribe tú comentario
*
*
» Mensaje: