Fallback font aanmaken

Caches clearen en bv homepage opnieuw openen.

Normaal zie je nu het font verspringen wanneer de swap gebeurt.

Wacht tot pagina is ingeladen, klik op F12 -> open console en plak daarin volgende code:

(async () => {
  await document.fonts.ready;
  const sample = 'Elektrische fietsen voor iedereen. The quick brown fox jumps over the lazy dog 0123456789';
  const size = 100;
  const ctx = document.createElement('canvas').getContext('2d');
  const m = (family, weight) => {
    ctx.font = `${weight} ${size}px ${family}`;
    return ctx.measureText(sample);
  };

  for (const weight of [400, 700]) {
    if (!document.fonts.check(`${weight} 16px "nexa-text"`)) {
      console.warn(`nexa-text ${weight} not loaded, skipping`);
      continue;
    }
    const nexa = m('"nexa-text"', weight);
    const arial = m('Arial', weight);
    const sa = nexa.width / arial.width;
    const pct = v => (v * 100).toFixed(2) + '%';

    console.log(`@font-face {
  font-family: "Nexa Fallback";
  src: local("Arial");
  font-weight: ${weight};
  size-adjust: ${pct(sa)};
  ascent-override: ${pct(nexa.fontBoundingBoxAscent / (size * sa))};
  descent-override: ${pct(nexa.fontBoundingBoxDescent / (size * sa))};
  line-gap-override: 0%;
}`);
  }
})();

Dit genereert een css font family. Plak deze in je theme css waar je adobe typekit font wordt ingeladen en gebruik dit als fallback font, bv:

/* Fallback font while the adobe font is loading */
@font-face {
  font-family: "Nexa Fallback";
  src: local("Arial");
  font-weight: 400;
  size-adjust: 106.32%;
  ascent-override: 94.06%;
  descent-override: 28.22%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Nexa Fallback";
  src: local("Arial");
  font-weight: 700;
  size-adjust: 100.22%;
  ascent-override: 99.78%;
  descent-override: 29.93%;
  line-gap-override: 0%;
}

:root {

  /*
   * Font families
   */
  --font-nexa: 'nexa-text', 'Nexa Fallback', -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-family: var(--font-nexa);
}

Clear caches en laadt de pagina opnieuw, normaal zou het font niet te hard moeten verspringen tijdens de swap.

All done !