Fuentes en CSS

Fuentes en CSS

Fuentes en CSS

El texto es uno de los elementos de las páginas web que más ha sido beneficiado con el paso del tiempo. Con la especificación 3 de los estilos en cascada (CSS3) se abrieron nuevas posibilidades para el uso de fuentes en CSS.

font-family

La propiedad para determinar la fuente que mostrará un elemento es font-family, como valor incluimos el nombre de la fuente que deseamos utilizar.

Por lo regular se incluye más de una opción de fuente, cada una de ellas separada por una coma (,).

Si la primera opción no estuviera instalada en el dispositivo, se mostraría con la segunda opción, si no con la tercera. De no tener ninguna de las opciones instaladas, se mostrará con la fuente que tenga por omisión el dispositivo.

font-family

Si el nombre de la fuente tiene más de una palabra y estas se encuentran separadas por un espacio en blanco, por ejemplo: Times New Roman, es necesario colocar el nombre entre comillas, de lo contrario no se reconocerá e incluso podría inutilizar la regla.

p {font-family: Georgia, "Times New Roman", Times, serif;}

CSS1 y CSS2

Hasta hace algunos años, nos encontrábamos con la limitante que solo se podían utilizar fuentes de sistema para nuestras páginas, lo que significa que teníamos que apegarnos a los tipos de letra que las computadoras tenían instaladas “de fábrica”. Incluso en programas de edición de código, como Adobe Dreamweaver, venían las fuentes de sistema agrupadas por familias para su sencilla inclusión en el código CSS:

selección fuentes en dreamweaver
Selección de familia de fuentes en Adobe Dreamweaver CS4

Si deseábamos utilizar otro tipo de letra, por ejemplo, para títulos, se utilizaban imágenes, incluso se llegó a utilizar Adobe Flash para este fin.

Posteriormente en el sitio web shoqolate.com idearon un servicio que convertía una fuente  de tipo True Type, Open Type Printer, Font Binary o PostScript en javascript. Era un tanto trabajoso, pero el resultado por lo menos no era una imagen o Flash.

@font-face

Previo a CSS3, se comenzó a utilizar de manera mas amplia la importación de fuentes desde el servidor hacia la página web, solo era necesario cubrir a los diferentes navegadores con los formatos de fuentes que podían desplegar:

  • WOFF (Web Open Font Format) -Navegadores modernos-
  • EOT (Embedded Open Type) -Internet Explorer 6 a 8-
  • TTF (TrueType) -Safari, Android e iOS-
  • SVG (Scalable Vector graphics) -iOS-

Si contamos con una fuente que su licencia incluye su uso para web, podemos convertirla en todos estos formatos utilizando un servicio como el generador webfont de Fontsquirrell (https://www.fontsquirrel.com/tools/webfont-generator)

Código CSS:

@font-face {
 font-family: 'open_sansregular';
 src: url('opensans-regular-webfont.eot');
 src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
      url('opensans-regular-webfont.woff') format('woff'),
      url('opensans-regular-webfont.ttf') format('truetype'),
      url('opensans-regular-webfont.svg#open_sansregular') format('svg');
 font-weight: normal;
 font-style: normal;
}

Los diferentes formatos de los archivos de la fuente se colocan en el servidor y su ruta se escribe como el valor de la propiedad src:

url(‘ruta_al_archivo_de_fuente.woff’)

Nota: El servicio de Fontsquirrel devuelve, además de los archivos de la fuente en sus distintos formatos, un archivo llamado stylesheet.css con el código CSS generado, listo para copiar y pegar en nuestra hoja de estilos (solo es necesario ajustar la ruta de los archivos de las fuentes en caso que los archivos se colocaran en otro folder distinto a donde se encuentra la hoja de estilos).

CSS3

En el momento de escribir este artículo (Julio 2016), ya no es indispensable incorporar todos los formatos de la fuente, únicamente los formatos WOFF y WOFF2 (que ofrece una mayor compresión), quedando el código como en el siguiente ejemplo:

@font-face {
 font-family: 'open_sansregular';
 src: url('opensans-regular-webfont.woff2') format('woff2'),
      url('opensans-regular-webfont.woff') format('woff');
 font-weight: normal;
 font-style: normal;
}

Servicios de fuentes en línea

Otra forma de incorporar diversas fuentes en una página web, es mediante un servicio de fuentes en línea, este servicio lo proporcionan en su mayoría empresas especializadas en licenciamiento de fuentes, casi todas mediante un pago.

Algunos sitios que proporcionan este servicio son:

Google Fonts
Gratis

Adobe TypeKit
Desde $0 USD anuales

Fonts.com
Desde $0 USD mensuales

Webtype
Desde $20 USD anuales

Hoefler&Co
Desde $99 USD anuales

Los precios mostrados son solo una referencia, revisados a la fecha de este artículo.

Compra de fuentes

Por supuesto también podemos comprar las fuentes, la única consideración que debemos conocer antes de hacerlo es que con la compra adquiramos la licencia de uso en web.

Algunos sitios donde podemos adquirir fuentes son:

Font Squirrel
Fuentes desde $0 USD

Fontspring
Fuentes desde $0 USD

Conclusión

Para quienes gustan de la tipografía, es un magnífico momento para darse vuelo al diseñar una página web con la gran cantidad de fuentes de alta calidad disponibles, así como su fácil inclusión.

 

Desarrollador web desde 1994 e instructor de Diplomados de Web y Web Avanzado en diversas instituciones públicas y privadas.
¿Te fue útil el artículo? Por favor ayúdanos a difundirlo compartiéndolo a través de tus redes sociales.

Autor: Miguel Méndez

Desarrollador web desde 1994 e instructor de Diplomados de Web y Web Avanzado en diversas instituciones públicas y privadas.

Déjanos un comentario

Sé el primero en comentar

avatar
wpDiscuz