Una de las grandes limitaciones que siempre hemos tenido diseñando en la web ha sido la incapacidad de poder usar fuentes mas allá de las que el usuario tiene instaladas por defecto en su sistema. Por ello las opciones que teníamos era utilizar imágenes (sólo recomendable para encabezados y menús) y las clásicas fuentes Arial, Verdana, Georgia, …etc., las llamadas fuentes «web-safe» que sabemos se encuentran en la mayoría de los sistemas. Recientemente han salido herramientas como Cufón y Typekit, que nos permiten mostrar fuentes usando javascript, pero estos sistemas no son la solución más óptima.
Hoy día gracias al avance de los navegadores podemos usar cualquier fuente utilizando la propiedad CSS @font-face, siempre que tengamos en cuenta y respetemos la licencia de cada una, que debe permitir empotrado mediante @font-face. Podemos ver un listado de fuentes y licencias que permiten este uso en el wiki de webfonts.info.
A continuación os explicaré cómo utilizar @font-face para poder usar fuentes de verdad en la web.
La forma fácil
La forma más sencilla es utilizar el generador de fontsquirrel. Simplemente tenemos que subir la fuente que queramos utilizar, marcar los formatos EOT, SVG y WOFF, y nos descargaremos un paquete que contiene nuestra fuente en los distintos formatos y un ejemplo con el código CSS para hacerlo funcionar.
Explicación del CSS. ¿Por qué tantos formatos?
Echemos un vistazo al css para poder usar la fuente Quicksand Light:
@font-face { font-family: 'QuicksandLight'; src: url('Quicksand_Light.eot'); src: local('Quicksand Light'), local('QuicksandLight-Regular'), url('Quicksand_Light.woff') format('woff'), url('Quicksand_Light.otf') format('opentype'), url('Quicksand_Light.svg#QuicksandLight-Regular') format('svg'); } h1{font: 60px/68px 'QuicksandLight', Arial, sans-serif;} |
En primer lugar definimos el nombre de la fuente con font-family. Este nombre es el que usaremos cuando asignemos dicha fuente mediante la propiedad font, en este ejemplo al h1. Después se debe poner inmediatamente el src con la versión EOT, que es el formato utilizado por Internet Explorer. De esta manera IE descargará y utilizará este formato, y no seguirá buscando los siguientes ya que no reconoce el valor local() del segundo src.
El resto de navegadores ignorarán el EOT y probarán los siguientes formatos hasta que encuentren uno que funcione en ellos. WOFF es el nuevo formato que será soportado por Firefox 3.6 y apunta a ser el futuro en los formatos de fuentes empotradas, así que no está de mas incluirlo. Firefox 3.5, Safari, Opera y Chrome 4 usarán el fichero OTF o TTF.
El formato SVG es necesario para versiones antiguas de Chrome y Safari para iPhone.
Después solo nos queda añadir la propiedad font a los elementos que queramos, sin olvidarnos de añadir otras fuentes web-safe por si algo falla (en este caso Arial y sans-serif).
Aquí podemos ver una una demo utilizando la fuente Quicksand.
Finalmente, si no queremos pasar por el proceso de buscar una fuente con licencia empotrable y convertirla, podemos utilizar los kits de fontsquirrel, entre los que tenemos una amplia selección de fuentes preparadas para descargar en paquetes que contienen todos los formatos necesarios, con un fichero html y css de ejemplo de uso.
Yo mismo, probando la autenticación vía twitter 🙂
El mundo cada vez más globalizado y los navegadores por su cuenta. Curioso. Como siempre, mil gracias.
@Maicro Se pretende unificar todo esto de las fuentes con el nuevo estándar WOFF, que es una mejora importante sobre todo a nivel de licencias. A las fundiciones no les interesa que puedas bajarte una fuente de cualquier web que la use e instalarla en tu ordenador, por ello este formato va a ser sólo para empotrar en web. Pero bueno esto es nuevo y ahora falta que los navegadores se vayan subiendo al carro (Firefox ha sido el primero, y por supuesto IE será el último).
El eterno problema de las licencias y los derechos de autor. Entre las copias ilegales de los sistemas operativos, las páginas dedicadas a tipografías, las descargas mediante programas de intercambio y la propia naturaleza de una tipografía, me hace suponer el escasa cantidad de usos legales que debe de haber de tipografías. Y es que la esencia de nuestra cultura, el lenguaje, plasmado en la escritura, lo hace tan necesario que es muy difícil plantearse de dónde y de quién proviene el tipo que empleamos para cada escrito.
Tal vez este formato sea la solución idónea para proteger los derechos de los tipógrafos, pero, como con todo lo digital, tarde o temprano me temo que presentará su vulnerabilidad.
Gracias.
[…] Fuentes en la web con @font-face Esta entrada fue publicada el Miércoles, 6 Octubre , 2010 a las 1:55 pm y clasificada en […]
https://www.mortaji.co/simulador-exani-ii/
Fuentes en la web con @font-face
pinjaman tunai dengan jaminan bpkb mobil
Fuentes en la web con @font-face
http://www.mortaji.com
Fuentes en la web con @font-face
que significan tatuajes de rosa delos vientos
Fuentes en la web con @font-face « David Rojas – Diseño y desarrollo web
x descargar musica gratis nicky jam
Fuentes en la web con @font-face « David Rojas – Diseño y desarrollo web
tatuajes japoneses en la espalda para mujer
Fuentes en la web con @font-face « David Rojas – Diseño y desarrollo web
tatuajes de parejas tumblr
Fuentes en la web con @font-face « David Rojas – Diseño y desarrollo web
depresion por amor a distancia
Fuentes en la web con @font-face « David Rojas – Diseño y desarrollo web
enarm 2019 fecha de examen
Fuentes en la web con @font-face « David Rojas – Diseño y desarrollo web