Adobe lanzó recientemente un servicio de fuentes web gratuito para complementar Typekit, su increíble servicio premium. Adobe Edge Web Fonts le ofrece actualmente alrededor de 500 familias de fuentes gratuitas que puede usar en su sitio hoy con poco esfuerzo. ¿Qué tan bueno es eso?
El proceso para implementar estas fuentes no es tan sencillo como algunos de los otros servicios a los que podría estar acostumbrado, por lo que hoy vamos a analizar y ver cómo funciona todo.
Conoce las fuentes web de Edge
Lanzar Edge Web Fonts es un movimiento un tanto sorprendente para Adobe. Le da a los fanáticos de Adobe una nueva razón para renunciar a comprar una suscripción a Typekit. Sin embargo, dada la fuerza de los competidores libres, como Google Web Fonts, tal vez fue un movimiento necesario.
Lo realmente extraño para mí es lo fragmentada que parece la idea en este momento. Edge Web Fonts en realidad usa Typekit para servir las fuentes, pero no es, como es de esperar, simplemente un nuevo plan gratuito incluido en Typekit. Actualmente es más de 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 durante una visita rápida a la documentación.
"No es, como es de esperar, simplemente un nuevo plan gratuito incluido en Typekit".Tal vez Adobe está utilizando el? Edge? ¿Herramientas y servicios como una especie de? Google Labs? estilo de juegos, lo que significa que Edge Web Fonts podría graduarse para convertirse en parte de Typekit algún día. Pero eso es todo conjeturas, por ahora, los dos son conceptualmente distintos.
Implementación: elige tu veneno
Edge Web Fonts es en realidad un servicio bastante fantástico en términos de selección. Hay un montón de excelentes fuentes contribuidas por Adobe, Google (¿Competidor? ¿Socio? Google siempre difumina esta línea) 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 una cuestión de ciencia espacial, pero hay algunas opciones diferentes que debe tener en cuenta:
- Herramienta de vista previa - Un pequeño widget en el sitio de Fuentes web de Edge que te ayuda a elegir una fuente y tomar el código.
- Soporte de aplicaciones - Algunas aplicaciones de Adobe están integrando el servicio directamente para que pueda acceder a la biblioteca de fuentes gratuita completa con facilidad.
- Manual - Puede usar la documentación y escribir su propio código para implementar cualquiera de las fuentes en cualquier lugar que desee.
En última instancia, las opciones son buenas, y tenemos varias para elegir aquí. Echemos un vistazo a cada uno de cerca.
Herramienta de vista previa
Para usar la herramienta de vista previa, pulse la página de fuentes web de Adobe Edge y desplácese hacia abajo hasta el final de la página. Debes encontrar la siguiente herramienta en la columna de la izquierda:
Esta pequeña herramienta es simple, pero útil. Simplemente elige una fuente en el menú desplegable y el pequeño cuadro de vista previa se actualiza en vivo con tu selección. Incluso puedes personalizar el texto en la vista previa:
Como vimos en la captura de pantalla anterior, su selección produce dos fragmentos de texto que se pueden usar para implementar la fuente en su sitio. Comienza con una incrustación de JavaScript:
Luego salta a su CSS y usa el nombre de la fuente en su código como lo haría con cualquier fuente nativa.
El problema
Esto es bastante fácil, ¿verdad? Elija la fuente, agarre el código; hecho. No estoy seguro de que pueda ser mucho más simple. Desafortunadamente, lo que encuentras con esta herramienta es que es bastante laborioso elegir una fuente, dado que este es tu método para hacerlo:
Como puedes ver, obtienes una enorme lista de texto simple. Esto significa que tiene que pasar y seleccionar cada opción una a la vez para ver la vista previa. Obviamente, esto no es ideal!
Soporte de aplicaciones
Actualmente, el soporte de aplicaciones es limitado, pero es probable que se amplíe en un futuro próximo. Sus dos opciones en la actualidad son Edge Code (corchetes) y Muse.
No soy un fan de Muse, así que veamos cómo funciona el soporte de aplicaciones en Edge Code, que en realidad se perfila como un editor de texto bastante bueno.
Fuentes Web en Código Edge
Para usar las fuentes web en el código perimetral, salte a su CSS y comience a escribir una familia de fuentes. Esto abrirá un menú contextual con? ¿Buscar fuentes web? Opción en la parte inferior:
Haga clic en este elemento y obtendrá algo que es mucho mejor que la lista de texto plano que vimos en el ejemplo anterior. Aquí vemos una cuadrícula de vistas previas de fuentes similar a la que encontraría en Google Web Fonts.
Aquí puede buscar las fuentes, desplazarse por ellas manualmente o usar los filtros de la izquierda. Los dos botones en la parte superior izquierda le permiten elegir entre las fuentes de encabezado y párrafo y los ocho botones en la parte inferior le permiten filtrar por estilos como sif sif y manuscritos.
Para elegir una fuente, simplemente selecciónela y presione el botón? ¿Listo? botón. Sin embargo, todo lo que realmente hace es insertar el nombre de la fuente en su CSS, luego puede configurar manualmente algunas fuentes de respaldo.
El problema
Aunque me encanta el soporte en la aplicación para elegir realmente una fuente, lo que sucede cuando haces la elección es un poco decepcionante. Es bueno que inserte el nombre para usted en el CSS, pero esto no es suficiente para implementar la fuente en su sitio, aún necesita ese fragmento de código HTML desde antes. Esto no se genera automáticamente mediante los pasos anteriores, ni parece haber una forma clara de hacerlo desde el documento HTML.
En última instancia, el soporte en la aplicación es lo suficientemente limitado como para que aún termines de navegar a través de la documentación completa para la implementación manual.
Implementación manual
Nuestra última opción está completa en la implementación manual, y Adobe tiene documentación exhaustiva para ayudarlo a hacer precisamente eso.
La clave para implementar fuentes manualmente es entender la sintaxis del enlace en el código de inserción. Aquí hay un ejemplo de la documentación:
Como puedes ver, hay mucho que hacer aquí. Lo que estamos haciendo es implementar varias familias y apuntar a variaciones específicas en ellas. Aquí hay una pequeña tabla que preparé para ayudarnos a analizar lo que está sucediendo en ese enlace:
Como puede ver, hay tres partes que necesitamos para envolver nuestras mentes. Echemos un breve vistazo a cada uno.
familia
Este es fácil, simplemente agregue el nombre de la fuente que le gustaría usar. Esto es técnicamente todo lo que necesita para hacer que la fuente personalizada funcione. Solo esto atraerá a la familia como un todo. Puede importar varias familias con un punto y coma como separador.
fvd
Algunas familias vienen con múltiples variaciones como "Extra Light". o? Semibold.? Puede importarlos de forma selectiva utilizando la? Descripción de variación de fuente? o fvd, que se denota con una letra minúscula y un número.
Usando este gráfico que se encuentra en la documentación, podemos agarrar fácilmente variaciones específicas de la familia en lugar de agarrar todo el objeto, ahorrando tiempo en la etapa de carga. Así es como se ve en acción:
Como puede ver, primero escriba la familia, luego inserte dos puntos seguidos de los códigos fvd, que están separados por comas.
subconjunto
Los subconjuntos le permiten cierto control sobre el tamaño del archivo de fuente incrustado al elegir si necesita o no todos los glifos disponibles. Hay dos opciones en este momento: por defecto y todas.
¿El valor por defecto? el conjunto contiene sus caracteres estándar, y suele ser todo lo que necesitará. ¿El todo? set es una versión expandida que le ofrece todo lo que la fuente tiene para ofrecer, por lo que aquí se encontrarán los pequeños extras y los caracteres impares. Cada fuente es diferente y puede o no contener el glifo que desea implementar.
Si quieres el? Default? subconjunto, no tiene que molestarse en escribir nada extra. Si quieres el? Todo? subconjunto, tirar en dos puntos y la palabra? todos?
html]
[/ html]
El problema
Obviamente, el método de implantación manual es el mejor porque le da tanto control sobre los archivos de fuentes que está incrustando. Sin embargo, el problema con este método es que realmente no tienes una buena manera de ver en qué te estás metiendo. La documentación simplemente ofrece una lista gigante de fuentes sin formato y sus opciones:
Para obtener una vista previa de una fuente, tendrá que probarlo, usar la funcionalidad de la aplicación o la herramienta de vista previa que vimos anteriormente.
Conclusión
Adobe Edge Web Fonts es una solución de fuente web increíblemente robusta y expansiva, y estoy encantado de que Adobe la haya hecho disponible de forma gratuita.
Hay varias formas de implementar una fuente web de Edge, cada una de las cuales tiene su propia lista de ventajas y desventajas. En última instancia, me encantaría ver una aplicación web similar a Typkit que te ayude a obtener una vista previa y navegar por las fuentes sin ser forzado en Edge Code o Muse. Sin esto, probablemente me quedo con Google Web Fonts la mayor parte del tiempo.
¿Qué piensas? ¿Es el nuevo servicio gratuito de fuentes de Adobe suficiente para hacerle pensar dos veces antes de recurrir a su solución de fuente web típica? ¿Por qué o por qué no?