Le code incorporé est la manière dont les polices Typekit sont chargées sur votre site web dans le navigateur. Il existe plusieurs versions de codes incorporés : CSS par défaut, CSS @import et JavaScript avancé.

Les codes incorporés par défaut et @import utilisent uniquement CSS pour le chargement des polices (sans JavaScript), ce qui signifie qu’ils peuvent être utilisés non seulement dans les pages web, mais aussi dans les bulletins d’information ou les courriers électroniques HTML, Google AMP, etc. Le code incorporé avancé utilise JavaScript pour charger les polices de manière asynchrone, activer les rappels personnalisés et fournir les événements typographiques natifs afin de gérer n’importe quel texte sans style apparaissant brièvement.

Le chargement des polices JavaScript est également nécessaire pour les kits dynamiques, qui sont utilisés pour la diffusion de polices web est-asiatiques.

Pour obtenir le code incorporé d’un kit donné, lancez l’éditeur de kits et cliquez sur le lien « code incorporé » en haut à droite.

Codes incorporés par défaut et @import : chargement de polices CSS seulement

Le code incorporé Typekit par défaut est une balise <link> unique qui charge le code CSS du kit depuis le réseau de polices Typekit (use.typekit.net).

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

Pour obtenir le code incorporé par défaut pour votre kit, ouvrez l’éditeur de kits, puis cliquez sur le lien « code incorporé » en haut à droite.

Code incorporé&nbsp;CSS par défaut

Typekit fournit également un code incorporé @import, que vous pouvez utiliser directement dans les feuilles de style. Ajoutez-le entre les balises de style dans le code CSS.

<style>
  @import url("https://use.typekit.net/xxxxxxx.css");
</style>
import-en

Pour obtenir le code incorporé @import pour votre kit, ouvrez l’éditeur de kits, puis cliquez sur le lien « code incorporé » en haut à droite. Sélectionnez ensuite l’onglet @import

Code incorporé avancé : chargement des polices JavaScript

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é. Le code incorporé avancé utilise JavaScript pour charger, de façon asynchrone, tous les fichiers sur votre site depuis Typekit, afin d’obtenir des performances optimales.

Le code incorporé avancé est également nécessaire pour les kits dynamiques, qui sont utilisés pour la diffusion de polices web est-asiatiques.

<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 obtenir le code incorporé avancé pour votre kit, ouvrez l’éditeur de kits et cliquez sur le lien « code incorporé » en haut à droite. Sélectionnez ensuite l’onglet Avancé. (Les kits dynamiques affichent uniquement l’option JavaScript 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.

Pour personnaliser davantage le code incorporé avancé, transmettez un objet de configuration à la méthode Typekit.load ; voir la section API JavaScript Typekit pour plus d’informations.

API JavaScript Typekit

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énements typographiques et les options de configuration. 

Remarque :

Les événements typographiques JavaScript ne sont pas disponibles pour les kits dynamiques ; utilisez plutôt les événements typographiques CSS.

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.

 

Modification du code incorporé dans un site web

Sur un site web qui utilise déjà Typekit par le biais du code incorporé JavaScript, vous pouvez passer à un kit CSS en remplaçant dans le code les balises <script> de Typekit par le code incorporé <link> HTML ou le code incorporé CSS @import.

De même, afin de tirer profit des options JavaScript, le code incorporé CSS dans un site web peut être remplacé par le code incorporé avancé.

Il n’est pas nécessaire de republier le kit. Vous pouvez accéder à n’importe quelle version du code incorporé à tout moment.

Utilisation de plusieurs kits sur un site

Il est déconseillé d’ajouter le code incorporé pour plusieurs kits sur une même page web. Il est généralement plus efficace d’utiliser un seul kit, et ce pour plusieurs raisons :

  • Chaque kit chargé sur une même page doit charger sa propre copie du code incorporé, ce qui est souvent redondant.
  • 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