Cómo utilizar fuentes de color en la web

() translation by (you can also view the original English article)

Cada diseñador web sabe cómo establecer el color de una fuente, ¿verdad? Es una de las primeras cosas que hacemos cuando comenzamos a aprender CSS. Elegimos un color, y luego usamos estilos para establecerlo, como el color: azul; o color: morado;, por lo que todos los glifos de nuestra fuente elegida convierten ese color, y solo ese color.

Pero, ¿qué pasaría si pudieras definir más de un color por glifo? ¿Qué pasaría si pudieras hacer tus letras azules y moradas, o tener degradados entre azul y morado, o incluso tener media docena de colores o más aplicados a una sola familia de fuentes?

Bueno, con la aparición de fuentes de color OpenType, puedes hacer precisamente eso.

Checa esta imagen de cuatro fuentes gratis de color diferentes:

Esto puede parecer imágenes fijas juntas en Illustrator, pero en realidad estás viendo texto en vivo, editable y legible por motores de búsqueda en un navegador.

En lugar de tener su color controlado a través de CSS, estas fuentes tienen información interna que les permite tener varios colores por glifo, lo que da una presentación bastante llamativa.

¿Te preguntas dónde descargar fuentes de color? No te sientas limitado por las fuentes de color gratuitas disponibles. Mejor, checa la selección de las mejores fuentes de color para sitios web de Envato Elements. Ve hasta abajo de este tutorial para obtener más información.

Dónde obtener fuentes de color gratuitas

Las fuentes de color son todavía bastante nuevas, por lo que todavía no han lanzado un gran número de ellas, y entre las que están disponibles, hay una mezcla de fuentes de color gratuitas y de pago.

¿Sabías que una de las fuentes gratis de color más populares es la fuente Gilbert? La fuente Gilbert se basa en la bandera gay, diseñada por Gilbert Baker.

The Gilbert font is also known as the Rainbow color font — La fuente Gilbert también se conoce como la fuente color arcoíris.

Gilbert Baker fue un activista LGBTQ y un artista. Era conocido por ayudar a sus amigos a crear pancartas para protestas y marchas. Para honrar la memoria de Gilbert Baker después de su muerte en 2017, la fuente Gilbert fue creada como una fuente de color gratis, inspirada en el lenguaje de diseño de la icónica bandera de arcoíris.

Ahora, para asegurarme de que puedes jugar con fuentes de color tú mismo, elegí cuatro fuentes de color gratis para nuestra demostración. Puedes tomar copias de estas fuentes en las siguientes ubicaciones:

La fuente Gilbert en typewithpride.com
Abalone en colorfontweek.fontself.com
Playbox en colorfontweek.fontself.com
Bixa en bixacolor.com

El código utilizado para agregarlos a la página no es nada nuevo, es sólo el mismo @font-face que conoces y amas. Ve el estilo de fuente de color CSS aquí:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Color Fonts</title>
	<style>
	@font-face {
		font-family: 'Gilbert';
		src: url('fonts/Gilbert-Color Bold-Preview_1004.otf');
	}
	@font-face {
		font-family: 'Abalone';
		src: url('fonts/Abelone-FREE.otf');
	}
	@font-face {
		font-family: 'Playbox';
		src: url('fonts/Playbox-FREE.otf');
	}
	@font-face {
		font-family: 'Bixa';
		src: url('fonts/NTBixa-Color.woff2');
	}
	body {
		font-size: 4.5rem;
		line-height: 1.618;
	}
	.gilbert {
		font-family: 'Gilbert';
	}
	.abalone {
		font-family: 'Abalone';
		font-size: 3.8rem;
	}
	.playbox {
		font-family: 'Playbox';
	}
	.bixa {
		font-family: 'Bixa';
	}
	</style>
</head>
<body>
		<a class="gilbert">Gilbert Color Font</a>
		<div class="abalone">Abalone Color Font</div>
		<div class="playbox">Playbox Color Font</div>
		<div class="bixa">Bixa Color Font</div>
</body>
</html>

Soporte de navegadores y Estilo de fuente de color

Ahora mismo, si quieres probar las fuentes de color en el navegador, tendrás que usar Firefox o Edge, los dos únicos navegadores con soporte completo de estilo de fuente de color CSS. Safari limita la compatibilidad con el formato SBIX solamente. Chrome sólo tiene soporte en Android, y luego sólo para formato CBDT. Opera no tiene soporte.

Modificación del estilo de fuente de color CSS

Por el momento, no podemos usar CSS para cambiar los colores que se utilizan dentro de una fuente de color. Sin embargo, es posible que un diseñador de fuentes envíe una fuente con una serie de variaciones predefinidas incluidas. Esas variaciones se pueden modificar mediante la propiedad font-feature-settings.

Podemos ver esta funcionalidad en acción en la demostración de Robin Rendle de la fuente Trajan Color de TypeKit.

Los colores son fijos, incluso en los enlaces

Como los colores de una fuente de color se fijan dentro de la propia fuente, la propiedad de color que normalmente se aplica a su texto no tendrá absolutamente ningún efecto, incluidos los enlaces, cualquiera que sea su estado.

También vale la pena saber de qué si bien no se producirá ningún cambio de color con los enlaces, todavía pueden tener su decoración de texto subrayado predeterminada aplicada, y que el subrayado recibirá cualquier color que especifiques en tu CSS. Si decides combinar fuentes de color y enlaces, puede valer la pena usar el subrayado para ayudar a los usuarios a distinguir los vínculos del resto del texto.

Aquí hay un ejemplo de código:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Color Fonts</title>
	<style>
	@font-face {
		font-family: 'Gilbert';
		src: url('fonts/Gilbert-Color Bold-Preview_1004.otf');
	}
	body {
		font-size: 4.5rem;
		line-height: 1.618;
	}
	.gilbert {
		font-family: 'Gilbert';
	}
	a {
		color: red;
	}
</head>
<body>
		<div class="gilbert">Gilbert Color <a href="#">Link</a></div>
</body>
</html>

Esto nos dará un subrayado rojo como se ve en la última palabra:

Las 5 mejores fuentes de color para sitios web de Envato Elements

Si eres diseñador web o gráfico, te encantará esta suscripción tipo mercado. Por una tarifa mensual baja, tienes descargas ilimitadas de fuentes web, plantillas de sitios web, plantillas gráficas y mucho más.

¡Chequemos esta selección y descarguemos fuentes de color hoy!

1. Fuente de color en negrita Mixan (OTF, WOFF)

Mixan es una fuente de dos colores en negrita. Esta fuente web sans-serif brillante cuenta con letras gruesas y redondeadas y funciona muy bien para títulos cortos de color.

2. Fuente de color Jungle (OTF, TTF, WOFF)

Jungle es una divertida fuente de color pastel que cuenta con 52 caracteres únicos. La fuente de color pastel Jungle se verá muy bien en títulos juguetones e infantiles.

3. Revoxa - Fuente de color de pantalla moderna (OTF, TTF, WOFF)

¿Buscas una fuente moderna de dos colores? Revoxa es una fuente de dos colores sans-serif especialmente creada para diseños contemporáneos.

Lo que hace de Revoxa una fuente de color única es que incluye tres estilos: regular, cortes y líneas. Puedes mezclar estas capas para crear la mejor fuente de color para sitios web. Esta fuente de dos colores incluye:

Revoxa Regular
Revoxa Línea
Revoxa Corte 1
Revoxa Corte 2
Glifos estándar
Kit de fuentes web

4. Betamin - Fuente de color sans-serif (OTF, WOFF)

Betamin es una fuente sans-serif con líneas redondeadas. Esta fuente de color arcoíris es brillante y divertida, y se ve muy bien en los títulos.

La fuente de color arcoíris Betamin presenta letras mayúsculas en cinco colores. Puedes usarlo como fuente multicolor o fuente de un solo color.

5. Fuente de color de Geometricity (OTF, TTF, SVG, EOT, WOFF)

¿Buscando descargar fuentes de color con diseños únicos? Geometricity es para ti. Es una fuente geométrica de dos colores. Usa esta fuente de color pastel realmente genial para una variedad de proyectos, gracias a sus múltiples formatos.

Descubre más sobre la tipografía

Entre las fuentes de color y las fuentes variables, los desarrollos más recientes de OpenType buscan hacer que las fuentes en el navegador sean mucho más divertidas e interesantes. ¡El futuro de la tipografía del diseño web se ve brillante!

Si quisieras aprender más sobre el mundo de la tipografía web, tenemos esta guía de aprendizaje completa: El ABC de la tipografía web

Y aquí hay más contenido que puedes checar hoy sobre fuentes web, fuentes variables y fuentes SVG: