# Adobe fonts efficient inladen

# Swap instellen

- Ga naar [https://fonts.adobe.com](https://fonts.adobe.com)
- Bewerk het webproject waarin de fonts zitten
- Klik aan de rechterkant op 'Lettertypeweergave'
- Stel in op 'swap' en sla op.

# 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 !