Adobe fonts efficient inladen

Swap instellen

Inladen via hook_page_attachments_alter ipv via html.twig

/**
 * Implements hook_page_attachments_alter().
 *
 * Trim metatag description to 160 characters.
 */
function basetheme_page_attachments_alter(array &$attachments) {
  // Load Adobe typekit font css without blocking render.
  $kit = 'https://use.typekit.net/ehf4afy.css';
  $head = &$attachments['#attached']['html_head'];

  // Preconnects: font files are fetched with CORS, the CSS files without.
  $head[] = [[
    '#tag' => 'link',
    '#attributes' => ['rel' => 'preconnect', 'href' => 'https://use.typekit.net', 'crossorigin' => TRUE],
  ], 'typekit_preconnect_fonts'];
  $head[] = [[
    '#tag' => 'link',
    '#attributes' => ['rel' => 'preconnect', 'href' => 'https://use.typekit.net'],
  ], 'typekit_preconnect_css'];
  $head[] = [[
    '#tag' => 'link',
    '#attributes' => ['rel' => 'preconnect', 'href' => 'https://p.typekit.net'],
  ], 'typekit_preconnect_p'];

  // Non-blocking stylesheet.
  $head[] = [[
    '#tag' => 'link',
    '#attributes' => [
      'rel' => 'stylesheet',
      'href' => $kit,
      'media' => 'print',
      'onload' => "this.media='all'",
    ],
  ], 'typekit_css'];

  // Fallback for visitors without JavaScript.
  $head[] = [[
    '#tag' => 'link',
    '#noscript' => TRUE,
    '#attributes' => ['rel' => 'stylesheet', 'href' => $kit],
  ], 'typekit_css_noscript'];
}

Er hoeft geen enkele verwijzing te zijn in html.html.twig naar typekit.

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 !