Window : méthode queryLocalFonts() - Les API Web | MDN

Basculer la barre latérale

Thème

Automatique
Clair
Sombre

Français

Se souvenir de la langue En savoir plus

Window : méthode queryLocalFonts()

Disponibilité limitée

Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.

Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.

Contexte sécurisé: Cette fonctionnalité est uniquement disponible dans des contextes sécurisés (HTTPS), pour certains navigateurs qui la prennent en charge.

La méthode queryLocalFonts() de l'interface Window retourne une promesse (Promise) qui se résout avec un tableau d'objets FontData représentant les polices disponibles localement.

Pour utiliser cette méthode, l'utilisateur·ice doit accorder l'autorisation d'accéder aux local-fonts (le statut de l'autorisation peut être interrogé avec l'API Permissions). De plus, cette fonctionnalité peut être bloquée par une Politique d'autorisations définie sur votre serveur.

Dans cet article

Syntaxe

queryLocalFonts(options)

Paramètres

options Facultatif

Contient des paramètres de configuration optionnels. Actuellement, une seule propriété est définie :

postscriptNames Facultatif

Un tableau de noms PostScript de polices. Si cette option est définie, seules les polices dont les noms PostScript correspondent à ceux du tableau seront incluses dans les résultats ; sinon, toutes les polices seront incluses dans les résultats.

Valeur de retour

Une promesse (Promise) qui se résout avec un tableau d'objets FontData représentant les polices disponibles localement.

Exceptions

NotAllowedError DOMException

L'utilisateur·ice a choisi de refuser l'autorisation d'utiliser cette fonctionnalité lorsqu'il a été présenté avec l'invite de permission du navigateur après que la méthode a été invoquée pour la première fois.

SecurityError DOMException

L'utilisation de cette fonctionnalité a été bloquée par une Politique d'autorisations, ou elle n'a pas été appelée via une interaction de l'utilisateur·ice telle qu'un clic sur un bouton, ou l'origine actuelle est une origine opaque.

Exemples

Pour un exemple interactif fonctionnel, consultez notre démonstration de l'API d'accès aux polices locales (angl.).

Énumération des polices

L'extrait suivant interrogera toutes les polices disponibles et enregistrera les métadonnées. Cela pourrait être utilisé, par exemple, pour remplir un contrôle de sélection de polices.

js
async function journaliserFontData() {
  try {
    const policesDisponibles = await window.queryLocalFonts();
    for (const fontData of policesDisponibles) {
      console.log(fontData.postscriptName);
      console.log(fontData.fullName);
      console.log(fontData.family);
      console.log(fontData.style);
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
}

Limiter les résultats retournés

Pour limiter les données de polices retournées à une liste spécifique de polices, utilisez l'option postscriptNames.

js
async function retournerPolicesSpecifiques() {
  const policesDisponibles = await window.queryLocalFonts({
    postscriptNames: ["Verdana", "Verdana-Bold", "Verdana-Italic"],
  });

  return policesDisponibles;
}

Accéder aux données de bas niveau

La méthode blob() fournit un accès aux données SFNT (angl.) de bas niveau — il s'agit d'un format de fichier de police qui peut contenir d'autres formats de police, tels que PostScript, TrueType, OpenType ou Web Open Font Format (WOFF).

js
async function calculerFormatContour() {
  try {
    const policesDisponibles = await window.queryLocalFonts({
      postscriptNames: ["ComicSansMS"],
    });
    for (const fontData of policesDisponibles) {
      // `blob()` retourne un Blob contenant des données SFNT valides et complètes.
      const sfnt = await fontData.blob();
      // Extraire uniquement les octets dont nous avons besoin : les 4 premiers octets sont les informations de version SFNT.
      // Spécification : https://learn.microsoft.com/en-us/typography/opentype/spec/otff#organization-of-an-opentype-font
      const sfntVersion = await sfnt.slice(0, 4).text();

      let formatContour = "UNKNOWN";
      switch (sfntVersion) {
        case "\x00\x01\x00\x00":
        case "true":
        case "typ1":
          formatContour = "truetype";
          break;
        case "OTTO":
          formatContour = "cff";
          break;
      }
      console.log("Format de contour :", formatContour);
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
}

Aider à améliorer MDN

Cette page vous a-t-elle été utile ?

Oui Non

Apprendre à contribuer

Cette page a été modifiée le 17 mars 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu