Code incorporé par défaut

Le code incorporé standard de Typekit est une simple paire de balises <script>. La première est une balise <script> externe qui charge le code JavaScript du kit à partir de notre réseau de diffusion de contenu (CDN). La seconde balise <script> est un élément de code JavaScript intégré qui déclenche le chargement de polices à l’aide du kit.

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

Pour obtenir le code incorporé correspondant à votre kit, ouvrez l’éditeur de kits, puis cliquez sur le lien « code incorporé » en haut à droite de l’écran. Le code incorporé JavaScript par défaut vous est alors communiqué. Ajoutez-le à la balise <head> du site.

Instructions sur l’utilisation du code incorporé JavaScript

L’incorporation standard charge le fichier CSS Typekit de manière asynchrone sur votre site (async: true), de sorte que la page ne soit pas bloquée pendant le chargement du fichier. Le chargement asynchrone permet d’éviter que le rendu du reste de la page ne soit bloqué pendant le chargement des polices lorsqu’une demande d’un kit est lente pour une raison quelconque.

L’ajout de manière asynchrone du fichier CSS à la page peut faire apparaître brièvement un texte sans style (FOUT) pendant le chargement des polices. La plupart des navigateurs masquent bien le contenu FOUT par défaut. Tous les autres problèmes peuvent être contrôlés à l’aide d’événements typographiques, une fois le script chargé et exécuté.

Si vous préférez que la page attende que les polices Typekit soient disponibles, utilisez la balise <script> pour bloquer le rendu de la page et éviter l’apparition de texte FOUT ; supprimez l’option {async: true} ou définissez-la sur false.

Code incorporé avancé

Le code incorporé par défaut convient à la plupart des utilisateurs. Si, toutefois, vous devez éliminer toute éventualité qu’un problème de chargement du kit n’interfère avec le chargement du reste de la page, envisagez d’utiliser le code incorporé avancé. Afin d’optimiser les performances, le code incorporé avancé charge les polices CSS Typekit et JavaScript de manière asynchrone sur votre site.

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

Pour connaître le code incorporé avancé de votre kit, sélectionnez le nom du kit dans le menu pour ouvrir l’éditeur de kits. Cliquez ensuite sur le lien « code incorporé » en haut à droite et sélectionnez « Afficher le code avancé ».

Où trouver le code incorporé avancé dans l’éditeur de kits

Par défaut, le code incorporé avancé tente de charger le code JavaScript du kit pendant 3 000 millisecondes (3 secondes) avant d’ajouter le nom de classe « wf-inactive » à la page. Vous pouvez changer ce délai en modifiant la valeur de la propriété « scriptTimeout » dans le bloc de configuration.

API JavaScript Typekit

Remarque : Les événements typographiques JavaScript ne sont pour l’instant pas pris en charge dans les kits dynamiques ; utilisez les événements typographiques CSS à la place.

Le code JavaScript du kit Typekit expose une variable globale Typekit avec une méthode publique load. L’appel de Typekit.load sans aucun argument déclenchera le chargement des polices.

Typekit.load()

Vous pouvez également transmettre un objet de configuration à Typekit.load.

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

L’objet de configuration comprend deux types de propriétés : les rappels d’événement typographique et les options de configuration. Les rappels suivants peuvent être spécifiés :

  • loading - Ce rappel est déclenché lorsque toutes les polices ont été demandées.
  • active - Ce rappel est déclenché lorsque le rendu des polices a été effectué.
  • inactive - Ce rappel est déclenché lorsque le navigateur ne prend pas en charge les polices liées *ou* si aucune des polices ne peut être chargée.
  • fontloading - Ce rappel est déclenché une fois pour chaque police chargée. Le rappel est appelé avec le nom de famille comme premier argument et la description de variation de police comme second argument.
  • fontactive - Ce rappel est déclenché une fois pour chaque police dont le rendu est effectué. Le rappel est appelé avec le nom de famille comme premier argument et la description de variation de police comme second argument.
  • fontinactive - Ce rappel est déclenché si la police ne peut pas être chargée. Le rappel est appelé avec le nom de famille comme premier argument et la description de variation de police comme second argument.

Les options suivantes sont prises en charge :

  • async : active le chargement CSS asynchrone. Par défaut, elle est définie sur true.
  • classes : désactive les classes d’événements typographiques définies sur l’élément HTML si elle est définie sur false. Par défaut, elle est définie sur true.
  • events : désactive les rappels d’événements typographiques si elle est définie sur false. Par défaut, elle est définie sur true.
  • timeout : nombre de millisecondes avant temporisation du chargement. Par défaut : 3 000 (3 secondes).

Si events et classes sont tous deux définis sur false, le code JavaScript Typekit insère uniquement le lien CSS dans les polices et n’exécute aucun contrôle des polices.

 

Kits dynamiques et distribution de polices Web d’Asie orientale

Typekit a développé des kits dynamiques destinés à la distribution de polices d’Asie orientale. Compte tenu du volume des polices est-asiatiques (bien plus de 10 000 glyphes dans la plupart des cas), il est pratiquement impossible de charger ces polices sur un site Web sans que cela n’ait un impact considérable sur le temps de chargement.

Lorsque vous ajoutez une famille de polices d’Asie orientale à votre kit, elle se transforme automatiquement en ce que nous appelons un kit dynamique. Dans ce kit dynamique, une nouvelle option Jeu de caractères, appelée Jeu partiel dynamique, est automatiquement activée dans l’éditeur de kits.

Kit dynamique incluant la police japonaise Source Han&nbsp;Sans

Le kit dynamique recherche les éventuelles modifications apportées au modèle DOM (un flux d’actualité ou une section de commentaires, par exemple), puis demande les nouveaux caractères qui doivent être ajoutés au jeu partiel (le cas échéant). On parle alors d’augmentation dynamique ; elle survient automatiquement pour toutes les familles de polices du kit qui utilisent l’option de jeu partiel dynamique.

Ainsi, plutôt que de télécharger l’intégralité d’une nouvelle police, nous pouvons simplement demander les glyphes supplémentaires et procéder à la mise à jour directement dans le navigateur.

Pour en savoir plus sur l’utilisation de ces nouvelles fonctionnalités, consultez les articles d’aide Ajout de polices à votre site Web et Prise en charge linguistique et jeux partiels de langues.

Pour en savoir plus sur la prise en charge des navigateurs, consultez notre page Navigateurs et systèmes d’exploitation pris en charge mise à jour.

Utilisation de plusieurs kits sur un site

Il est souvent possible d’ajouter plusieurs kits à une page Web. Cela n’est toutefois pas recommandé. Il est généralement plus efficace d’utiliser un seul kit que plusieurs kits sur une même page et ce, pour plusieurs raisons :

  • Chaque kit chargé sur une page charge sa propre copie de JavaScript, qui est principalement redondante.
  • Chaque kit envoie aussi des requêtes distinctes de polices, ce qui augmente le nombre de requêtes HTTP et ralentit davantage le chargement.
  • Un kit peut être mis en mémoire cache sur toutes les pages du site après son premier chargement.

Il n’est pas possible de charger à la fois un kit avec jeu partiel dynamique et un kit avec jeu partiel de langues sur une même page Web. Le kit avec jeu partiel dynamique est prioritaire. Les polices issues d’un autre kit ne seront pas disponibles sur votre site. Pour inclure à la fois des polices avec jeux partiels de langues et jeux partiels dynamiques sur votre site, elles doivent être chargées à partir du même kit.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne