Crea una fuente web con Glyphs Mini
Entonces, ¿creaste una fuente con Glyphs Mini y quieres mostrarla en una página web? Es tan fácil como presionar un botón.
Para crear una fuente web, necesitaremos un archivo con el sufijo.woff o .woff2. Entonces, ¿qué es un WOFF? Web Open Font Format (WOFF) es un formato de fuente para usar en páginas web. Fue desarrollado en 2009 por Erik van Blokland, Tal Leming y Jonathan Kewand y ahora es una recomendación del World Wide Web Consortium (W3C). WOFF es esencialmente OpenType o TrueType con compresión y metadatos adicionales. WOFF2 es una variante de WOFF mejor comprimida y empaquetada de una forma más eficiente. Puedes comprobar qué navegadores web son compatibles con WOFF y WOFF2, y verás que todos los navegadores recientes funcionan bastante bien.
Para exportar su fuente como WOFF, elija Archivo> Exportar (Cmd-E) y elija Webfont (WOFF) como tipo de archivo. Glyphs Mini exportará un archivo WOFF y, a partir de la versión 2.1 y posteriores, un archivo WOFF2.
(image: webfont1.PNG class:shadow)
Puedes elegir hacer autohint a tu fuente, si lo deseas. La opción Autohint aplica el algoritmo de hinting automático AFDKO a todos los glifos que no tienen configurados el hinting manualmente. Esta opción espera que los valores de las astas y las zonas de alineación se establezcan correctamente, así que asegúrate de tener las medidas correctas en tu Información de la fuente (Cmd-I). Desmarca esta opción para las fuentes que no deberían tener hinting o para acelerar la exportación cuando solo desees probar tu fuente.
La opción Eliminar superposición aplica un algoritmo para eliminar las superposiciones de los trazados al momento de la exportación, similar al filtro Eliminar superposición. Puedes desmarcar esta opción mientras realizas las pruebas para acelerar la exportación, o si ya has eliminado las superposiciones en tu archivo.
La opción Carpeta de exportación te permite establecer una ubicación predeterminada en la que se exportarán las fuentes. Si no estableces un destino, Glyphs Mini mostrará un cuadro de diálogo para guardar. Pero ten cuidado, exportar tu fuente sobrescribirá cualquier instancia anterior con el mismo nombre en la misma ubicación. De hecho, puede resultarte útil si estás utilizando la carpeta Adobe Fonts como destino de exportación.
El objetivo principal aquí es mantener el tamaño del archivo lo más pequeño posible. Para comenzar, asegúrate de exportar solo los glifos que deseas mostrar. Para hacer esto, desmarca la opción Exportar del menú contextual en el modo Editar, o en la barra lateral en la vista previa de la Fuente.
(image: webfont2.PNG) (image: webfont3.PNG class:shadow)
En el modo de vista previa de la Fuente, los glifos que no se exportan se mostrarán con un símbolo rojo de prohibido en la celda del glifo.  (image: webfont4.PNG)
También puedes asegurarte de utilizar la menor cantidad de nodos posible en tus glifos.  (image: webfont5.PNG)
Para poder apreciar tu archivo WOFF en acción, necesitarás código HTML y CSS para completar su prueba.
Puedes probar tu fuente en tu navegador copiando y pegando lo siguiente en un editor de texto sin formato de tu elección (TextMate, SublimeText, Atom, o TextWrangler son opciones populares):
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=9">
<title>your font</title>
<style type="text/css" media="screen">
@font-face { font-family: 'yourfont-Regular'; src: url('yourfont-Regular.woff'); }
body {
font-family: "yourfont-Regular";
font-feature-settings: "kern" on, "liga" on;
-moz-font-feature-settings: "kern" on, "liga" on;
-webkit-font-feature-settings: "kern" on, "liga" on;
-ms-font-feature-settings: "kern" on, "liga" on;
-o-font-feature-settings: "kern" on, "liga" on;
}
p { padding: 5px; margin: 10px; }
p#smallParagraph { font-size: 12pt; }
p#largeParagraph { font-size: 32pt; }
p#veryLargeParagraph { font-size: 100pt; }
</style>
</head>
<body>
<p id="smallParagraph">abcdefghijklmnopqrstuvwxyz</p>
<p id="largeParagraph">abcdefghijklmnopqrstuvwxyz</p>
<p id="veryLargeParagraph">abcdefghijklmnopqrstuvwxyz</p>
</body>En el código HTML, reemplaza todas las instancias de yourfont con el nombre de tu fuente. Siéntete libre de editar el CSS y elegir los tamaños de fuente que deseas mostrar. Si deseas ver todos los glifos exportables en tu fuente, aquí tienes un truco: agrega un Filtro inteligente en Glyphs Mini haciendo clic en la rueda dentada en la esquina inferior izquierda en la vista previa de la Fuente. Agrega dos reglas a tu nuevo filtro: Tiene Unicode y Exportar glifo. Selecciona la opción Sí para ambos.
(image: webfont6.PNG class: shadow)
En la barra lateral, selecciona el filtro que acabas de crear. Luego, selecciona todos los glifos que se muestran en la pestaña Fuente y elige Editar> Copiar (Cmd-C), luego pégalos en tu archivo de texto en lugar de abcdefghijklmnopqrstuvwxyz. Guarda el archivo con un sufijo .html en la misma carpeta que su WOFF:
Luego, arrastra el archivo a una ventana del navegador, voilà:
Hay algunos sitios web que te permiten probar tu fuente en línea. Nuestros favoritos son:
- Wakamai Fondue del diseñador y codificador holandés Roel Nieskens
- Font Drop por el diseñador tipográfico alemán Viktor Nübel y su hermano Clemens Nübel
Simplemente arrastra tu archivo WOFF y echa un vistazo a tu fuente web. Si detectas un error en tu fuente, corrígelo en Glyphs Mini y vuelve a exportarlo. Luego, actualiza las páginas de prueba y deberías ver la versión actualizada de tu fuente.
¡Diviértete!