Reducción de webfonts en FF Subsetter

Empieza a optimizar echando un vistazo a tu paleta tipográfica y viendo qué estás cargando, pero no usando. La negrita y la cursiva del texto pueden ser un buen punto de partida. Comprueba también los estilos que sólo se utilizan en determinadas secciones de tu sitio. Estos no necesitan ser cargados inicialmente a menos que el usuario esté aterrizando en una sección que los requiera.

En segundo lugar, miraría en el subconjunto. Esto es lo que es: Digamos que usas un tipo de letra grande y bonito para poner números en una infografía, pero sólo lo usas para eso. Cargas todo fuente, pero sólo utilizas sus cifras. El subconjunto le permite eliminar todos los caracteres innecesarios, de modo que en lugar de cargar el archivo completo de 90 kilobytes, carga uno de 5 kilobytes.

Todos los principales distribuidores de fuentes web ofrecen opciones de subconjunto, pero aquí hablaré de la que hemos creado nosotros, FF Subsetter, creada exclusivamente para reducir webfonts de nuestra marca propia, FontFont. Puedes probarlo sin comprar nada. Sólo tienes que seguir el enlace, donde encontrarás una copia de demostración de FF Bauer Grotesk Medium Web Pro esperándote en la esquina superior derecha.

Abre ese archivo zip para encontrar esta fantástica página de demostración que te guía a través de las características de la fuente web (arriba). Si te pones a jugar con los conjuntos estilísticos y otros botones, te harás una idea más clara de cómo FF Subsetter te permite ajustar la sensación de una fuente basándose en sus características OpenType. Aunque las características OpenType más básicas están ampliamente soportadas en todos los navegadores actualizados, el subconjunto puede usarse para incorporar sólo las que quieras, con la ventaja añadida de reducir el tamaño del archivo.

Bien. Sube la fuente web (terminada en .woff) a FF Subsetter para empezar a eliminar los elementos no esenciales. Por defecto, se empieza con Basic Subsetting. Aunque las opciones están agrupadas con marcas de verificación que activan o desactivan todo el grupo a la vez, puedes hacer ajustes aún más finos, desactivando y activando caracteres individuales seleccionándolos individualmente. Para que todo este proceso no resulte demasiado costoso, le recomiendo que realice algunos cambios arbitrarios, descargue el archivo resultante y le añada un número, como 001, para que pueda hacerse una idea de cómo funciona la herramienta y para que adquiera el hábito de mantener marcada de forma identificable toda la salida de subconjuntos posterior.

Para opciones más avanzadas, ve a Subconjunto experto en la parte superior. Esta opción te permite filtrar los caracteres que se van a subconjuntar en función del idioma o de las características OpenType, como he mencionado más arriba. Puedes elegir entre conservar todos los caracteres necesarios para que funcione una característica determinada o congelar la característica, lo que significa que los caracteres que aparecen cuando esa característica está activada se convierten en los nuevos caracteres predeterminados. Por ejemplo, si siempre quieres que FF Bauer Grotesk aparezca con una a minúscula de dos pisos, entonces congela el Conjunto estilístico 2, y tu a preferida aparecerá por defecto.

Una nota sobre el subconjunto por idioma: Ten cuidado de no hacer un subconjunto demasiado agresivo, como lo llama Bram Stein, desarrollador de Typekit. Sólo porque estoy escribiendo esto en inglés, no puedo saber a qué otros idiomas traducirán esta historia los navegadores de la gente. E incluso en inglés, no puedo descartar la eventualidad de mencionar a un diseñador tipográfico como František Štorm o Peter Biľak cuyo nombre pueda contener un carácter que yo haya descartado. Por supuesto, usted puede decidir que va a trazar la línea con el soporte griego o cirílico, o crear un subconjunto secundario fuente sólo con estos caracteres, y añadirlo justo detrás en su pila fuente .

Como menciona su advertencia, no todas las funciones avanzadas tienen sentido si se utilizan todas a la vez. Los datos de kerning, por ejemplo, no deberían eliminarse a menos que realmente no los necesites. ¿Cuándo podría no necesitarlos? Bueno, si sólo está utilizando un tipo de letra para establecer números utilizando cifras tabulares, los datos de kerning son irrelevantes y pueden eliminarse, ya que los caracteres que se ajustan todos a un ancho común no requieren kerning. ¿Qué ocurre con el interletraje? Se me ocurren muy pocos casos en los que eliminar los datos de interletraje sea una buena idea. Uno podría ser cuando se sabe que sólo se va a utilizar el tipo de letra a un tamaño bastante grande.

Ya está. Sigue estos pasos y estarás en camino a una carga de página más ligera.

Un par de notas finales: La carga asíncrona de fuente puede simplificarse un poco usando este cargador de fuentes web de código abierto, realizado en colaboración por la gente de Typekit y Google. Y, aunque el último formato, woff2, está disponible en nuestro webfonts, FF Subsetter no lo soporta actualmente. Permanece atento a las novedades al respecto.

¿Tienes alguna pregunta? Házmela saber.