Handboek Annuleren

Insluitcodes

Zoeken

Laatst bijgewerkt op 28 feb. 2022

Via de insluitcode worden de weblettertypen geladen op je website in de browser of in een HTML-e-mail in de e-mailclient.

De standaardinsluitcode en de code @import gebruiken alleen CSS om lettertypen te laden (geen JavaScript). Ze kunnen worden gebruikt om lettertypen toe te voegen aan webpagina's, e-mails of nieuwsbrieven in HTML, Google AMP en veel andere soorten projecten waarin weblettertypen worden ondersteund. Lettertypen laden via JavaScript wordt gebruikt voor dynamische subsets, die zijn vereist voor de weergave van Oost-Aziatische weblettertypen.

Je vindt de insluitcode voor elk van je projecten op de pagina Webprojecten.

Standaardinsluitcode

De standaardinsluitcode is een één <link>-tag die de CSS van het webproject vanuit het lettertypenetwerk (use.typekit.net) in de browser laadt.

<link rel=&quot;stylesheet&quot; href=&quot;https://use.typekit.net/xxxxxxx.css&quot;>

Je vindt de standaardinsluitcode voor je project op de pagina Webprojecten. Voeg deze insluitcode toe aan de tag <head> van je website.

De insluitcode @import

De insluitcode @import kan rechtstreeks in je CSS-stijlblad worden gebruikt. Je vindt de insluitcode @import voor een project door naar de pagina Webprojecten te gaan en te klikken op de optie 'koppeling @import'.

Voeg deze code toe tussen style-tags in de <head> van je website:

<style>
  @import url(&quot;https://use.typekit.net/xxxxxxx.css&quot;);
</style>

Of plaats de code bovenaan in je CSS-bestand:

Opmerking:

Als je de insluitcode @import gebruikt, moet deze aan het begin van de tag <style> of het CSS-bestand staan met eventuele andere @import-instructies omdat de lettertypen anders niet worden geladen. Alleen de vermelding @charset mag vóór regels met @import worden toegevoegd.

Als je een van de opties voor de CSS-insluitcode gebruikt, wordt de rest van de pagina mogelijk pas weergegeven nadat de CSS van het weblettertype is geladen. Dit verschilt echter per browser, afhankelijk van hoe deze omgaat met externe CSS-bestanden.

Als je lettertypen asynchroon wilt laden waarbij de rest van de pagina niet wordt geblokkeerd, voeg je een andere JavaScript-bibliotheek toe naast de CSS-insluitcode om het laden van je lettertype aan te passen.

JavaScript-insluitcode

De JavaScript-insluitcode is vereist voor dynamische subsets, die worden gebruikt voor de weergave van Oost-Aziatische weblettertypen.

<script>
  (function(d) {
    var config = {
      kitId: 'xxxxxxx',
      scriptTimeout: 3000,
      async: true
    },
    h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,&quot;&quot;)+&quot; wf-inactive&quot;;},config.scriptTimeout),tk=d.createElement(&quot;script&quot;),f=false,s=d.getElementsByTagName(&quot;script&quot;)[0],a;h.className+=&quot; wf-loading&quot;;tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!=&quot;complete&quot;&&a!=&quot;loaded&quot;)return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
  })(document);
</script>

De JavaScript-insluitcode voor een dynamisch project staat vermeld op de pagina Webprojecten.

Je kunt de geavanceerde insluitcode aanpassen door een configuratieobject door te geven aan de methode Typekit.load. Raadpleeg het gedeelte JavaScript API voor meer informatie.

JavaScript API

JavaScript gebruikt de globale variabele Typekit met één openbare methode load. Als je 'Typekit.load' aanroept zonder argumenten, wordt het laden van lettertypen geactiveerd.

Typekit.load()

Je kunt ook een configuratieobject doorgeven aan Typekit.load.

Typekit.load({
      // configuratie…
 });

De volgende callbacks kunnen worden opgegeven:

loading: Deze callback wordt geactiveerd wanneer alle lettertypen zijn aangevraagd.
active: Deze callback wordt geactiveerd wanneer de lettertypen zijn weergegeven.
inactive: Deze callback wordt geactiveerd wanneer de browser geen gekoppelde lettertypen ondersteunt *of* als geen van de lettertypen kan worden geladen.
fontloading: Deze callback wordt één keer geactiveerd voor elk lettertype dat is geladen. De callback wordt aangeroepen met de familienaam als eerste argument en de beschrijving van de lettertypevariant als tweede argument.
fontactive: Deze callback wordt één keer geactiveerd voor elk lettertype dat wordt weergegeven. De callback wordt aangeroepen met de familienaam als eerste argument en de beschrijving van de lettertypevariant als tweede argument.
fontinactive: Deze callback wordt geactiveerd als het lettertype niet kan worden geladen. De callback wordt aangeroepen met de familienaam als eerste argument en de beschrijving van de lettertypevariant als tweede argument.

De insluitcode in een website wijzigen

Als je een website hebt die al lettertypen gebruikt via een verouderde JavaScript-insluitcode, kun je overschakelen naar de nieuwere CSS-versie door de <script>-tags in de code te vervangen door de HTML-insluitcode <link> of de CSS-insluitcode @import.

Verouderde insluitcode gebruiken in een website

Hoewel Adobe de opties voor de insluitcode af en toe wijzigt doordat we verbeteringen aanbrengen in de aanlevering van lettertypen, blijven alle eerdere versies van de insluitcodes werken.

Als je een verouderde insluitcode op je website gebruikt, is het niet vereist om deze te veranderen. Veel websites zullen echter profiteren van prestatieverbeteringen als je bijwerkt naar een nieuwere versie.

Eerdere versies van de insluitcode bevatten een JavaScript-versie die het CSS-bestand asynchroon laadt:

<script src=&quot;https://use.typekit.net/xxxxxxx.js&quot;></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

en een protocol-afhankelijke JavaScript-versie:

<script src=&quot;//use.typekit.net/xxxxxxx.js&quot;></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

(Zelfs als je site de protocol-afhankelijke insluitcode gebruikt, wordt voor het aanleveren van lettertypen HTTPS gebruikt voor alle verzoeken.)

Meerdere insluitcodes gebruiken in een website

We raden af om meer dan één insluitcode aan dezelfde webpagina toe te voegen om verschillende redenen:

Elke kopie van de insluitcode is grotendeels overbodig.
Elk project doet aparte verzoeken om lettertypen, waardoor het aantal HTTP-verzoeken toeneemt en het laden verder wordt vertraagd.
Eén project kan na de eerste keer laden voor alle pagina's van je site in de cache worden geplaatst.