Más de 500 fuentes gratis para tus páginas web
Adobe ha lanzado recientemente un servicio de fuentes web gratis como complemento de Typekit, su increíble servicio premium. Adobe Edge Web Fonts actualmente ofrece aproximadamente 500 familias de fuentes gratis que puedes utilizar en tu sitio hoy con poco esfuerzo. ¿No es genial?
Pero el proceso de implementación de estas fuentes no es tan sencillo como algunos de los otros servicios que podrían ser utilizados, así que hoy vamos indagar y echar un vistazo a cómo funciona todo.
Conoce Edge Web Fonts
El lanzamiento de Edge Web Fonts ha sido un movimiento un poco sorprendente de Adobe. Ofrece a los fans de Adobe una nueva razón para renunciar a la compra de una suscripción Typekit. Sin embargo, dada la fuerza de los competidores gratuitos como Google Web Fonts, tal vez era una medida necesaria.
La parte realmente extraña para mí es el grado de fragmentación que la idea parece tener en este momento. Edge Web Fonts utiliza realmente Typekit para servir las fuentes, pero no como era de esperar, simplemente un nuevo plan gratuito integrado en Typekit. En la actualidad es más bien un servicio independiente. Este servicio se implementa directamente en algunas de las aplicaciones de Adobe, pero también está disponible para su uso sin esas aplicaciones, siempre a través de una rápida visita a la documentación.
"No se trata, como es de esperar, simplemente un nuevo plan gratuito integrado en Typekit".
Quizás Adobe está utilizando las herramientas y servicios "Edge" como una especie de "Google Labs", lo que significa que Edge Web Fonts podría un día pasar a convertirse en parte de Typekit. Pero todo eso es una conjetura, por ahora, ya que los dos son conceptualmente distintos.
Implementación: Elije tu fuente
Edge Web Fonts es actualmente un servicio bastante fantástico en términos de selección. Hay un montón de grandes fuentes aportadas por Adobe, Google y otros.
La pregunta es, "¿cómo se usa?" Es una pregunta bastante simple, pero la respuesta es un poco más complicada. No es muy difícil, pero hay algunas opciones diferentes que se deben tener en cuenta:
Herramienta de vista previa - Un pequeño widget en el sitio de Edge Web Fonts que ayuda a elegir un tipo de letra y copiar el código.
Soporte App - Algunas aplicaciones de Adobe están integrando el servicio directamente para que se pueda acceder a la biblioteca de tipos de letras gratis con facilidad.
Manual - Puedes utilizar la documentación y escribir tu propio código para implementar cualquiera de las fuentes en cualquier lugar que desees.
En última instancia, las opciones son buenas, y tenemos un número de ellas para elegir. Echemos un vistazo de cerca a cada una.
Herramienta de vista previa
Para utilizar la herramienta de vista previa, ve a la página de Adobe Edge Web Fonts y desplázate hasta la parte inferior de la página. Deberás encontrar la siguiente herramienta en la columna de la izquierda:
Esta pequeña herramienta es simple, pero muy útil. Sólo tienes que elegir una fuente en el menú desplegable y se visualizará un pequeño ejemplo en la caja del tipo de letra seleccionado. Incluso puedes personalizar el texto en la vista previa:
Como vimos en la imagen anterior, la selección produce dos fragmentos de código que se pueden utilizar para implementar el tipo de letra en tu sitio. Se inicia con una inserción de JavaScript:
<!-- Para utilizar en tu sitio web la fuente seleccionada anteriormente, simplemente copia y pega este código para incrustar en el <head> de tu HTML: -->
<script src="http://use.edgefonts.net/sanvito-pro-display.js"></script>
A continuación, viene el código CSS para utilizar el nombre de la fuente en el código como lo harías con cualquier fuente nativa:
<!-- Ahora usa el nombre de tu font-family en tu CSS: -->
h1 {
font-family: sanvito-pro-display, serif;
}
El Problema
Esto es bastante fácil, ¿verdad? Eliges la fuente, copias el código; hecho. No estoy seguro de que podría ser mucho más simple. Por desgracia, lo que te encuentras con esta herramienta es que en realidad es bastante laborioso el elegir una fuente, dado que esta es su forma de hacerlo:
Como se puede ver, se obtiene una enorme lista en texto plano. Esto significa que tienes que ir recorriéndola y seleccionar todas las opciones de una en una para ver la vista previa. Obviamente, esto no es ideal!
Compatibilidad con aplicaciones
Actualmente, el soporte App es limitado, pero esto probablemente se expandirá en el futuro cercano. Sus dos opciones en este momento son Código Edge (soportes) y Muse.
Yo no soy un fan de Muse, así que echemos un vistazo a cómo funciona el soporte app en el Código de Edge, que en realidad perfila como un editor de texto muy vistoso.
Web Fonts en código Edge
[Nota: tendrás que unirte antes a Adobe a Creative Cloud]
Para utilizar las fuentes web en código Edge, hay que entrar en CSS y comenzar a escribir un font-family. Esto hará que aparezca un menú contextual con la opción "Examinar Web Fonts" en la parte inferior:
Haga clic en este artículo y obtendrás algo que es mucho mejor que la lista de texto sin formato que hemos visto en el ejemplo anterior. Aquí vemos una parrilla de previsualizaciones de fuentes similares a lo que te encontrarías en fuentes Web de Google.
Aquí puede buscar las fuentes, desplazándote a través de ellas de forma manual o utilizar los filtros de la izquierda. Los dos botones en la parte superior izquierda te permiten elegir entre la cabecera y las fuentes de párrafo y los ocho botones de la parte inferior permiten filtrar por estilos como "slab serif" o "escrito a mano" (handwritten).
Para elegir un tipo de letra, sólo tienes que seleccionar y pulsar el botón "Done". Todo esto es realmente cuando se inserte el nombre de la fuente en tu CSS, entonces puedes configurar manualmente algunos backup de las fuentes.
El Problema
Aunque me encanta el soporte app para elegir un tipo de letra, lo que sucede cuando haces la elección es un poco decepcionante. Es bueno que se inserte el nombre para el CSS, pero esto no es suficiente para aplicar en la práctica el tipo de letra en tu sitio, ya que todavía tienes que colocar el código HTML de antes. Esto no se genera automáticamente con los pasos anteriores, ni tampoco parece haber ninguna forma clara de hacerlo desde el documento HTML.
En última instancia, la ayuda de la aplicación será suficiente que termines, navegando a través de la documentación completa del manual de implementación.
Manual de Implementación
Nuestra última opción es un completo manual de implementación, y Adobe tiene la documentación completa para ayudar a hacer precisamente eso.
La clave para implementar manualmente las fuentes es la comprensión de la sintaxis del vínculo en el código de inserción. He aquí un ejemplo de la documentación:
<!-- Ejemplo de Aplicación Manual ->
<script src="/use.edgefonts.net/averia-libre:n4;bree-serif:n4:all.js"></script>
Como usted puedes ver, hay mucho que hacer aquí. Lo que estamos haciendo es aplicar múltiples familias orientando variaciones específicas en las mismas. Aquí hay una pequeña tabla que nos ayudará a visualizar lo que está sucediendo en el enlace:
Como puedes ver, hay tres partes en las que debemos fijarnos. Echemos un breve vistazo a cada una.
family
Esta es fácil, sólo tienes que poner el nombre de la fuente que deseas utilizar. Esto es técnicamente todo lo que necesitas para hacer el trabajo de fuente personalizada. Esto por sí solo se quiere la familia como un todo. Puedes importar varias familias con un punto y coma como separador.
<!-- Las familias separadas por punto y coma ->
<script src="/use.edgefonts.net/averia-libre;bree-serif.js"></script>
fvd
Algunas familias cuentan con múltiples variaciones, como "Extra Light" o "Semibold". Puedes importar de forma selectiva estas usando la ""Font Variation Description" o fvd, que se indica con una letra minúscula y un número:
El uso de este cuadro se encuentra en la documentación, y puedes fácilmente utilizar variaciones específicas de la familia en vez de cogerla toda completa, lo que ahorra mucho tiempo en la etapa de carga. Así es como se ve en acción:
<!-- FVDs separadas con comas ->
<script src="/use.edgefonts.net/advent-pro:n4,n7.js"></script>
Como se puede ver, primero se escribe la familia, a continuación, se insertan dos puntos seguidos por los códigos FVD, que están separados por comas.
subconjunto
Los subconjuntos permiten cierto control sobre el tamaño del archivo de fuente incrustada eligiendo si necesitas o no todos los glifos disponibles. Hay dos opciones en este momento: por defecto y todo (default y all).
El "default" set contiene los caracteres estándar, y por lo general todo lo que necesitas. El "all" set es una versión ampliada que da todo lo que la fuente tiene que ofrecer, por lo que se encuentran aquí los pequeños detalles y caracteres extraños. Cada letra es diferente y puede o no puede contener el glifo que buscas implementar.
Si deseas el subconjunto "default", no tienes por qué preocuparte de mecanografiar nada extra. Si deseas el subconjunto "all", se ponen dos puntos y la palabra "all".
<script src="/use.edgefonts.net/averia-libre:n4;bree-serif:n4:all.js"></script>
El Problema
Obviamente, el método de implantación manual es el mejor porque nos da más control sobre los archivos de fuentes que se están incrustando. El problema con este método es que realmente no se tiene una buena manera de ver lo que estás metiendo. La documentación se limita a ofrecer una lista gigante de fuentes sin formato y sus opciones:
Para previsualizar una fuente vas a tener que probarla utilizando la funcionalidad dentro de la aplicación, o la herramienta de demostración que vimos anteriormente.
Conclusión
Adobe Web Fonts Edge es una solución de fuentes web increíblemente sólida y expansiva, y estoy encantado que Adobe la haya puesto a disposición de forma gratuita.
Hay varias maneras de trabajar sobre la implementación de Edge Web Font, cada una de las cuales tiene su propia lista de pros y contras. En última instancia, me gustaría ver una aplicación web tipo Typkit que realmente te ayude a ver y revisar las fuentes sin ser forzado a usar el Código Edge o Muse. Sin esto, la mayoría de las veces probablemente me quede con Google Web Fonts.
