Tipografías desde servicios Web

Una de las mejores opciones que tenemos a la hora de personalizar el aspecto de nuestros documentos, mejorando su diseño, es a través de la tipografía. Usar una fuente fuera del grupo habitual de tipografías utilizadas en la mayoría de documentos puede ayudar a generar la identidad visual de nuestro proyecto.

El problema que tenemos a la hora de usar tipografías específicas en un sitio web es que el archivo de la fuente que estemos utilizando debe estar instalado en el equipo del usuario de nuestro sitio. De lo contrario el navegador del usuario reemplazará nuestra tipografía por la que tenga configurada por defecto, de manera que el sitio no tendrá el aspecto que nosotros esperábamos, llegando a provocar que algunos elementos se vean mal, o no se vean en absoluto, si la diferencia entre la fuente elegida por nosotros y la fuente por defecto del navegador es muy grande.

Para evitar este problema, tenemos que asegurarnos de que las fuentes usadas en nuestro proyecto estarán disponibles para todos los usuarios, de manera que si estos no la tienen instalada en el equipo, el navegador pueda descargarla como un archivo temporal y usarla para cargar el contenido de forma correcta.

Este objetivo podemos conseguirlo de dos maneras: usando un servicio web, como puede ser Google Fonts u otros. O adjuntando los archivos de fuente necesarios en nuestro servidor, para que el navegador los pueda descargar.

Uso de Google Fonts

Para utilizar fuentes de este servicio tenemos que seguir unos pasos muy sencillos.

  1. En primer lugar tenemos que seleccionar las fuentes que vamos a usar en el sitio de Google.
  2. Una vez seleccionadas, Google nos devuelve un enlace que tenemos que incluir en nuesto documento, ese enlace se encarga de solicitar a Google las fuentes necesarias para nuestro sitio y descargarlas en el navegador del usuario.
  3. Por último, las insertamos en nuestro documento a través del CSS, definiendo mediante la propiedad font-family el tipo de letra que queremos asignar a cada elemento.

Seleccionar fuentes en Google Fonts

Para usar fuentes de este servicio, el primer paso consiste en seleccionar las tipografías que queremos utilizar. Para ello accedemos a la web del servicio en https://fonts.google.com y usamos el buscador y el sistema de filtros que incorpora el sitio para elegir las tipografías que necesitemos

A medida que las vamos seleccionando, vemos que en la parte inferior de la pantalla aparece un pequeño cuadro mostrando los elementos que hayamos seleccionado. Es conveniente resaltar aquí, que si seleccionamos más de 3 fuentes, o más de 3 versiones de la misma fuente, el tiempo de carga de nuestra web se verá afectado por el tamaño de los archivos de fuente que se tendrá que descargar el usuario. Normalmente, además, no se usan más de 3 tipografías en un proyecto, pues provocará falta de identidad visual.

Vincular las fuentes en el documento

Una vez seleccionadas nuestras fuentes pinchamos sobre el cuadro inferior que hemos indicado. En el accedemos a las opciones de configuración de nuestra descarga. Entre otras cosas, aquí podemos seleccionar los diferentes estilos disponibles para una misma fuente. Aquí debemos mantener la misma precaución respecto al tamaño de los archivos a descargar.

En este cuadro, además, nos aparece la información necesaria para poder usar las fuentes en nuestro documento. En primer lugar aparece un cuadro que nos da dos opciones para vincular las fuentes. La primera es mediante una etiqueta HTML que colocaremos en el <head> de nuestro documento (en todos los que vayan a usar la tipografía seleccionada). La segunda es una regla @import que colocaremos en el CSS de nuestro documento. Y también tendrá que estar disponible en todos los documentos que vayan a usar esas fuentes.

Ejemplo de códigos devueltos para usar las fuentes:


		

Para insertar en HTML

<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:300i,400,700|Limelight" rel="stylesheet">

Y si queremos insertarlo en el CSS

@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans:300i,400,700|Limelight');

En ambos casos el resultado es el mismo, estamos vinculando nuestro sitio al servicio de Goolge Fonts para que nos proporcione las fuentes indicadas cuando el navegador cargue la página. Pero la diferencia es muy importante:

Si uso la etiqueta <link> de HTML tendré que incluirla en cada uno de los documentos HTML. Supongamos que nuestro proyecto consta de 15 documentos HTML, si vamos a usar las fuentes en los 15 documentos tendré que insertar esa etiqueta en el <head> de cada uno de ellos.

En cambio, usando la regla @import de CSS, dado el mismo caso, y si los 15 documentos están usando la misma hoja de estilos, sólo tendré que insertar esa regla una sola vez en esa hoja de estilos para conseguir que se vincule en todos los documentos.
Nota: Hay que insertarla al principio de la hoja de estilos, o al menos antes de las definiciones de font-family que realicemos en ella.

Usar las fuentes en el documento

Una vez vinculado el documento con las fuentes a través de cualquiera de los dos enlaces anteriores ya estamos listos para usar nuestras fuentes. La forma de hacerlo es mediante la propiedad CSS font-family, igual que lo veníamos haciendo hasta ahora para usar las fuentes del sistema.

Para saber qué nombre exacto tenemos que escribir en font-family tenemos que fijarnos en el cuadro anterior de Google Fonts. Justo debajo de donde aparece el código para vincular las fuentes en el documento tenemos las definiciones para cada una de las fuentes que hemos seleccionado. Esos son los valores que tendremos que usar. En nuestro ejemplo son:


font-family: 'IBM Plex Sans Condensed', sans-serif;

font-family: 'Limelight', cursive;


		

A partir de aquí usaremos esos valores en nuestro CSS según nuestras necesidades. Si son fuentes que vamos a usar de manera amplia (para todo el texto del documento), podemos hacer una definición general a nivel de etiquetas, como hemos hecho en este documento:


body {
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: 20px;
}
h1, h2, h3, h4, h5, h6 {
	font-family: 'Limelight', cursive;
}
strong {
	font-weight: 700;
}
em {
	font-weight: 300;
	font-style: italic;
}
		

Y si queremos usar las tipografías de forma puntual, en lugar de para todo el documento, las podemos definir dentro de las clases que queramos:


.texto {
	font-family: 'IBM Plex Sans', sans-serif;
	...
}
.titular {
	font-family: 'Limelight', cursive;
	...
}
		

Tipografías desde archivo de fuente en nuestro servidor

En el caso de que queramos usar nuestras porpias tipografías en nuestro sitio, sin depender de un servicio externo, el proceso es también sencillo, pero algo diferente al anterior. En este caso tenemos que hacer:

  1. Preparar los archivos de fuente en formato compatible con el navegador y colocarlos en el servidor
  2. Indicar al navegador donde se encuentran los archivos de fuente necesarios mediante la regla CSS @font-face
  3. Usar las fuentes en el documento con font-family

Preparar los archivos para ser compatibles con el navegador

A día de hoy los navegadores modernos reconocen diferentes formatos de archivos tipográficos, entre ellos los habituales de las fuentes que instalamos en nuestro equipo, como los OTF y TTF. Pero en la actualidad se ha definido un formato de fuente estándar para los navegadores, el WOFF y su actualización WOFF2. Pero como ocurre siempre con las diferentes versiones de navegadores, no todos soportan estos tipos, de manera que si queremos asegurarnos de la mayor compatibilidad posible de nuestros archivos con los diferentes navegadores (y sus versiones) tendremos que dejar disponible la fuente en varios formatos. Al menos hasta que pase un tiempo y el uso de navegadores no estandarizados con el uso de la tipografía sea residual.

Si ya tenemos nuestras tipografías en estos formatos, ya tenemos la mayor parte del trabajo hecho, solo tenemos que copiar los archivos en el servidor. En caso contrario los tendremos que convertir.

Para convertir nuestra tipografía podemos usar un servicio web como el Font-Generator de Font Squirrel. Lo encontramos en esta web: https://www.fontsquirrel.com/tools/webfont-generator.

Su uso es muy sencillo: subimos la fuente o fuentes que queremos convertir, seleccionamos los formatos de salida, e iniciamos el generador. La aplicación nos devolverá un archivo zip comprimido con los archivos de fuente necesarios, más la documentación y ejemplos para entender cómo tenemos que configurar el servidor para utilizarlas.

Declarar la regla @font-face para usar los archivos de fuente

Una vez conseguidos los archivos con los formatos correspondientes, o al menos con el formato WOFF los copiamos a nuestro servidor. En este ejemplo los vamos a dejar todos dentro de la carpeta fuentes dentro de nuestro directorio raiz. Y los archivos que hemos convertido son:

Las dos últimas tienen un nombre personalizado (roja) para mostrar que sirve cualquier nombre en los archivos convertidos, no tiene porqué ser necesariamente el mismo que el de la tipografía original (como sí es el caso de las primeras)

En este caso hemos recurrido solamente a los formatos estándar de fuentes web: WOFF y WOFF2.

Una vez identificados los archivos en el servidor, el siguiente paso es declarar esa misma información en el CSS del documento. Lo que se trata es de indicar qué archivos generan los font-family que vamos a usar. Y para ello usamos la regla @font-face. Con ella básicamente lo que estamos haciendo es emparejar las propiedades font-family del documento con su archivo de fuente correspondiente. La declaración tiene esta forma:


@font-face {
    font-family: 'rojabold';
    src: url('fuentes/roja-webfont.woff2') format('woff2'),
         url('fuentes/roja-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}			
		

En ella lo primero que hacemos es definir su nombre, es decir, el nombre que vamos a usar en font-face para utilizar la fuente. y a continuación indicamos dónde se encuentra en el servidor el archivo para esa fuente. Eso lo hacemos con el atributo src. Las otras dos propiedades son menores, se refieren al estilo y peso de la tipografía.

En src podemos indicar tantas rutas de archivo como sea necesario (en función de los diferentes formatos de la fuente que tengamos) separándolos por comas.
Importante! El valor para url se define desde donde está ubicada la hoja de estilos donde definimos @font-face. En este ejemplo estamos asumiendo que la hoja de estilos donde estamos declarando esta regla se encuentra guardada en el directorio raiz del sitio, junto a la carpeta donde están las fuentes. Por eso escribimos fuentes/roja-webfont.woff. Si la hoja de estilos estuviese dentro de una carpeta llamada css junto a la carpeta fuentes la ruta para el archivo sería: ../fuentes/roja-webfont.woff.

Recuerda que esto es así para cualquier atributo o propiedad src o url que definamos en el css, sea de la propiedad que sea. No solo para @font-face

Por último, la declaración @font-face la haremos para cada archivo de fuente que hayamos generado. Y hay que remarcar que cada estilo, por ejemplo con pesos distintos, es una fuente distinta a estos efectos. En el ejemplo tenemos 3 pesos diferentes de la fuente Roboto, y eso supone tres archivos de fuente diferente. Pero en el caso de que para cada archivo contásemos con diferentes formatos de fuente (WOFF, WOFF2, OTF, TTF) esto no supondría diferentes archivos de fuente, sino que los diferentes formatos serían declarados a la vez en la misma @font-face, dentro del atributo src, separando las distintas rutas por comas, como hemos dicho antes.

De este modo, para nuestro ejemplo necesitaremos definir 4 reglas para incluir nuestras fuentes:


@font-face {
    font-family: 'titulares';
    src:url('fuentes/Roboto-Black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'cursiva';
    src:url('fuentes/Roboto-Italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'cuerpo';
    src:url('fuentes/Roboto-Thin-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'rojabold';
    src: url('fuentes/roja-webfont.woff2') format('woff2'),
         url('fuentes/roja-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}			
		

Vemos en estas reglas que los nombres para font-familylos definimos en la regla como queramos. Ese es el nombre que tendremos que usar después. Pero puede ser el que nosotros queramos.

Definición en el documento con font-family

A partir de aquí el camino es el mismo que en el apartado anterior. Simplemente usaremos font-family en los selectores CSS que queramos modificar su tipografía. En nuestro caso lo hemos hecho así:


.texto {
	font-family: 'cuerpo';
	font-size: 22px;
}
.texto h1, .texto h2, .texto h3, .texto h4 {
	font-family: 'titulares';
}

.texto em, .texto strong {
	font-family: 'cursiva';
}
.especial {
	font-family: 'rojabold';
	font-size: 72px;
	text-transform: uppercase;
}
	

Que nos devuelven este resultado:

Usando Font-Generator para incluir tipografías propias en la Web

Ejemplo de fuente para los párrafos, tiene la versión "italic" de la tipografía. También la hemos cambiado para las palabras en cursiva y en negrita.

Otro titular

Otro ejemplo de tipografía modificada.

Este titular tiene otra TIPOGRAFIA

Y este párrafo también. Kamarrada!!

Uso de iconos tipográficos

El uso de iconos mendiante las propiedades tipográficas de CSS se ha hecho muy popular en los últimos años. Esta técnica permite insertar imágenes vectoriales en nuestros documentos como si fueran una tipografía más.

La principal característica de las imágenes vectoriales (y las tipografías mismas también son vectores) es que permiten su escalado sin que pierdan resolución. Las mostremos al tamaño que las mostremos siempre se verán perfectas. Otra característica es que su color es sólido (no permite diferentes colores) y que puede ser cambiado de la misma forma que cambiamos el color de una tipografía en nuestro documento mediante CSS.

Para usar estos elementos, como ocurría con las tipografías vistas antes, tenemos dos opciones, recurrir a algún servicio en línea que nos proporcione los iconos necesarios, o conseguir nustros propios archivos de iconos y usarlos desde nuestro servidor.

Uso de servicio online: Font-awesome

La forma más sencilla de usar iconos en nuestro proyecto es recurrir a servicios externos. Vamos a ver como trabaja https://fontawesome.com/:

De forma similar a lo que hicimos con Google Fonts aquí solo tenemos que vincular en nuestro documento el servicio de font-awesome mediante una etiqueta en el <head> de nuestro documento y luego usar los iconos que necesitemos mediante una clase CSS.

En el apartado Get Started de la web de Font-Awesome encontramos los códigos necesarios para vincular el documento. Para el uso web nos da dos opciones, mediante javascript o mediante CSS. El uso es idéntico en ambos casos, pero la opción de javascript es más eficiente que la de CSS, aunque también es menos soportada por navegadores viejos. Nosotros elegiremos la primera, marcando la opción de usar todas las fuentes. Nos devolverá un código similar a este:


<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>
	

Una vez vinculado el documento con el servicio, ya podemos usar los iconos, para ello sólo tenemos que añadir la clase del icono correspondiente a cualquier etiqueta HTML en línea. Ellos usan la etiqueta <i>, que está totalmente desaconsejada en HTML5, y al mismo tiempo dicen que sería más semántico usar la etiqueta <span>. Eso es lo que vamos a hacer nosotros.

Para averiguar cual es la clase del icono que queremos usar vamos al apartado Icons de la web y localizamos el que nos interese, lo seleccionamos, copiamos su clase y la pegamos en nuestro documento:


<span class="fas fa-envelope"></span>
	

En este caso tenemos un dibujo de un sobre que podremos cambiar de color y tamaño fácilmente:

Si necesitamos cambiar el formato del icono, recurrimos a las herramientas y reglas CSS habituales. Podemos hacer algo así:


	<div class="formato">
		<span class="fas fa-exclamation-triangle"></span>
	</div>
	

Y el CSS:

.formato { font-size: 90px; color: red; }

Tendremos:

Iconos alojados en nuestro servidor desde Icomoon

En el caso de que queramos usar iconos propios, sin tener que recurrir a ningún servicio externo, podemos usar el servicio de Icomoon en la web https://icomoon.io/. Es algo similar al servicio de Font-Generator de Font Squirrel, en el que hacemos nuestra selección de iconos y a continuación descargamos un pack con los archivos necesarios para ser utilizados.

Para seleccionar los archivos tenemos que acceder a la app del servicio en https://icomoon.io/app. Ahí seleccionamos los iconos que vayamos a utilizar, y a continuación pulsamos en el botón Generate Font de la parte inferior de la pantalla. Nos lleva a una pantalla donde podemos hacer unos ajustes previos antes de la descarga, y cuando lo tengamos preparado pulsamos en el botón Download para descargar el archivo comprimido con nuestros datos.

Una vez descarguemos, tendremos un directorio con nuestras fuentes-icono y una hoja de estilos con el CSS necesario. El procedimiento es el mismo que el descrito para las fuentes instaladas en nuestro servidor, solo que aquí ya tenemos definida la regla @font-face y las clases que vamos a necesitar para usar cada uno de los iconos seleccionados. Será algo así:


@font-face {
  font-family: 'icomoon';
  src:  url('fuentes/icomoon/icomoon.eot?xzr74');
  src:  url('fuentes/icomoon/icomoon.eot?xzr74#iefix') format('embedded-opentype'),
    url('fuentes/icomoon/icomoon.ttf?xzr74') format('truetype'),
    url('fuentes/icomoon/icomoon.woff?xzr74') format('woff'),
    url('fuentes/icomoon/icomoon.svg?xzr74#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-home:before {
  content: "\e900";
}
.icon-cart:before {
  content: "\e93a";
}
.icon-phone:before {
  content: "\e942";
}
.icon-envelop:before {
  content: "\e945";
}
.icon-location:before {
  content: "\e947";
}
.icon-airplane:before {
  content: "\e9af";
}
	

Como en el caso anterior, lo importante es que las rutas estén bien definidas dentro del atributo src, por lo tanto si hemos cambiado el nombre a la carpeta que contendrá las fuentes, o si la hoja de estilos está en un lugar distinto de la que hemos descargado desde IcoMoon tendremos que corregir nuestra ruta en la regla para que el navegador pueda acceder a las fuentes.

Una vez hecho esto solo tenemos que usar las clases de nuestros iconos donde los necesitemos. Como vemos en el ejemplo siguiente, este tipo de icono es más versátil que el de Font Awesome porque permite, entre otras cosas, añadirlo a elementos de bloque directamente, o aplicarle atributos de text-shadow más facilmente, y ser tratado con independencia del texto que lo acompaña:


<ul>
	<li class="navegacion icon-home"><a href="#">Inicio</a></li>
	<li class="navegacion icon-cart"><a href="#">Carrito</a></li>
	<li class="navegacion icon-phone"><a href="#">Llama</a></li>
	<li class="navegacion icon-envelop"><a href="#">Escribe</a></li>
	<li class="navegacion icon-location"><a href="#">Mapa</a></li>
	<li class="navegacion icon-airplane"><a href="#">Vuela</a></li>
</ul>
	

Y el CSS:

.navegacion { font-size: 22px; margin: 10px; color: wheat; list-style: none; text-shadow: 1px 1px 1px maroon; } .navegacion a { color: wheat; text-decoration: none; text-shadow: none; margin-left: 20px; font-family: rojabold; letter-spacing: 3px; }

Que nos muestra:

Propiedades CSS para trabajar el texto