soy Kseso y esto EsCSS

Minimun & simple @kseso webfont loader: #CSS custom properties based 24.8.17

Explicación en detalle del método personal que utilizo para la carga de webfonts (Kseso webfont loader). Hasta el momento y a falta de testearlo en profundidad para que funciona satisfactoriamente.

Minimun & simple @kseso webfont loader: #CSS custom properties based

·Por Kseso ⧉ 24.8.17 ⚑ font loader ⚑ font-face ✎ 0

Los problemas asociados al uso, o mejor dicho, la carga de web fonts son conocidos desde el mismo momento que nació la regla @font-face de la mano de Microsoft allá por 1998 en Internet Explorer 4.

Los problemas de bloqueo, el Flash of Invisible Text (FOIT) o el Flash of Unstyled Text (FOUT), y el repain y reflow que perturban la composición de la página siempre han sido motivo de preocupación y de múltiples propuestas para paliarlos.

En el artículo Bálsamos traemos para @font-face: render, FOIT, font loading... [10/2015] recogía unas cuantas de estas solucciones y algo más.

Una breve intro

Desde el principio de este blog he convertido en una máxima aquel enunciado que dice:

Nunca sirvas aquello que no se necesita y menos aún lo intentes arreglar con un {display: none}

Traigo esto a colación porque como sabéis con mucha frecuencia hago uso del servicio de @Codepen para embutir sus pens como complemento de los artículos. Incluso los usuarios del blog lo pueden insertar también en sus comentarios.

Esto me llevó a incluir la llamada a su script diréctamente en la plantilla con los condicionales oportunos para hacerlo sólo en los tipos de páginas que lo pueden necesitar (posts y páginas estáticas).

Sin embargo no siempre hay pens en ellas. Por lo que entonces su presencia en el código se convierte en una tara.

Ello me llevó a pedir ayuda para crear un pequeño script e incluirlo en el code sólo cuando haya un pen en la página.

Una posible forma me llegó de Juan Barranco aka‏ @nihillo y la solucción premium del colaborador de este blog Jorge Mg aka‏ @itsjorgemg

Minimun & simple Kseso webfont loader: Custom properties base

Tras esta "intro", que me ha servido para dar créditos sin que se note, en mi pueblo ya me estarían diciendo: Céntrate Kseso, que nos come la tarde el canto. Así que al lío.

Bien es cierto que desde CSS se ha avanzado en minimizar sus aspectos negativos: El descriptor CSS font-display es parte del intento, entre otros, que viene a sumarse a todos los existentes y que contaba en el monográfico Arrieros Somos dedicado a @Font-face

A estas alturas creo que todos tenemos una pequeña idea del funcionamiento de todos los webfonts loaders. Básicamente lo que hacen es monitorizar la llamada a las tipografías y una vez que ya están disponibles cambian el código necesario (bien en el HTML, el CSS o ambos) para aplicarlas y que el texto se muestre con ellas.

Mi solución mínima basada en las CSS Custom Properties

En primer lugar declaro dos custom properties:

:root { --fontF: 'El Messiri'; --sinSerif: /* Fuentes del Sistema (ver post) */; } p:not([class]) { font-family: var(--fontF), var(--sinSerif); }

De entrada el valor var(--fontF) (la webfont) será ignorado por no haber coincidencia* y p:not([class]) se mostrará con la fuente del sistema correspondiente. Sin demoras, ni bloqueos, ni otros males. (*: a no ser que en la máquina del usuario exista una tipografía llamada 'El Messiri').

A continuación, basado en el js de Jorge MG, una vez que el DOM está ya creado hago la petición de la tipografía web. Como uso el servicio de Google Fonts se traduce en crear el link necesario para que sirva la fuente o fuentes web necesarias:


addEventListener('DOMContentLoaded', function() {
  if (document.querySelector('.entry-content') != null) {
     var jsFonts=document.createElement('link');
     jsFonts.href='https://fonts.googleapis.com/css?family=El+Messiri:400,600';
     jsFonts.rel='stylesheet prefetch';
     jsFonts.async='true';
     document.head.append(jsFonts);
   }
});

Por imposibilidad no he podido trastear a fondo con esta forma de cargar las webfonts. Sólo monté dos pen en Codepen.io para unas pruebas muy básicas con 20 tipografías importadas desde Google Fonts.

Los resultados asumo que no son concluyentes y además estarán algo contaminados por el propio servicio de Codepen.io. También los valores son fluctuantes. Sin embargo siempre he observado que son mayores utilizando la forma nativa de Google Fonts.

Incluso en momentos, desconozco los motivos, la diferencia es abismal como puedes ver en las siguientes imágenes:

Lo más significativo está en la parte inferior izquierda de cada imagen y en el siguiente resumen:

Google Loader Kseso Loader Finish: 12.44s 3.35s DOM content loader: 5.00s 1.35s Load: 11.35s 2.18s

Como te digo, nada concluyentes y anecdóticos estos valores y su diferencia en el caso de la captura en particular.

Pero lo que sí es totalmente objetivo es que al pasar la página por servicios como el de page speed inside o pingdom.com las webfonts que cargo de esta forma penalizan bastante menos que con el método nativo de Google. O hasta incluso parece que no existiesen en la evaluación de algunos parámetros ya que son "llamadas" una vez cargada la página.

Sólo espero que si alguien tiene tiempo, ganas y conocimientos haga pruebas más "científicas" y a fondo y pueda aportar su valoración de este método. Método de carga de las webfonts que de momento dejo funcionando hasta no tener datos que lo desaconsejen.

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.