Crea una fuente web con Glyphs Mini

Exportar una fuente WOFF

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.



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.

¿Necesito hacer hinting? El hinting solo tienen sentido para fuentes bastante ‘normales‘ diseñadas para leer en tamaños pequeños. El hinting ayudará a distorsionar sus contornos para que se ajusten mejor a la cuadrícula de píxeles, manteniendo así una legibilidad mínima en bajas resoluciones, a expensas de reproducir fielmente sus contornos. En otras palabras, el hinting es irrelevante para las tipografías de título o decorativas, fuentes con contornos complejos (es decir, cualquier cosa que tenga una gran cantidad de nodos) o tipografías manuscritas o caligráficas.

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.

Mantén un tamaño de archivo pequeño

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.





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.




También puedes asegurarte de utilizar la menor cantidad de nodos posible en tus glifos.



Prueba tus fuentes en tu navegador

Para poder apreciar tu archivo WOFF en acción, necesitarás código HTML y CSS para completar su prueba.

Citando a Wikipedia, HTML significa HyperText Markup Language y es el lenguaje de marcado estándar para crear páginas web. Con HTML, se pueden incrustar fuentes, imágenes y otros objetos en la página. Cuando se usa CSS significa Hojas de estilo en cascada y es un lenguaje de hojas de estilo utilizado para describir la presentación de un documento escrito en lenguaje de marcado. CSS está diseñado principalmente para permitir la separación del contenido de un documento de su presentación, incluidos aspectos como el diseño, los colores y las fuentes. CSS se puede incrustar en un archivo HTML.

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.



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!

Fuente en uso: Bussi de Stella Chupik

Actualización 21/03/2017: aclaraciones menores en la configuración HTML, 2 capturas de pantalla adicionales.
Actualización 23/09/2019: páginas de prueba de fuentes web actualizadas, notas agregadas sobre WOFF2 y hinting.
Actualización 11/031/2020: errores de tipeo corregidos.
Traducción al español de Sol Matas.