Police arabe CSS : l’intégrer proprement, de @font-face à WordPress

Par Arabicfont dans Web et développement 12 min de lecture

Une police arabe CSS ne demande qu’une règle @font-face par graisse, mais l’arabe ajoute ses propres pièges : sens de lecture, sous-ensembles qui perdent des fonctionnalités, interligne trop serré pour les voyelles. Voici la méthode complète, du fichier WOFF2 au thème WordPress, avec des mesures faites le 23 octobre 2026 dans Chrome 155 et Firefox 158 sous Windows 11.

Avant le CSS : lang et dir sur la balise html

Le navigateur doit savoir qu’il compose de l’arabe et dans quel sens. Deux attributs suffisent :

<html lang="ar" dir="rtl">

Sous WordPress, vous n’avez rien à écrire : la fonction language_attributes(), que les thèmes appellent dans leur en-tête, ajoute lang d’après la langue du site et dir="rtl" dès que cette langue s’écrit de droite à gauche. Sur un site en français qui cite de l’arabe, balisez chaque passage : <p lang="ar" dir="rtl">.

L’attribut lang ne sert pas qu’aux lecteurs d’écran. Les polices s’en servent : avec Noto Naskh Arabic, les chiffres ۴ ۶ ۷ changent de dessin entre lang="fa" (persan) et lang="ur" (ourdou). Un lang faux donne donc des glyphes faux.

Police arabe CSS et RGPD : Google Fonts ou auto-hébergement

Charger une police depuis Google Fonts envoie l’adresse IP de chaque visiteur aux serveurs de Google. Le 20 janvier 2022, le tribunal régional de Munich (LG München I, affaire 3 O 17493/20) a jugé cette transmission illicite sans consentement : l’exploitant d’un site a été condamné à verser 100 € au visiteur et à cesser, sous peine d’une amende pouvant atteindre 250 000 € par infraction. L’argument central du jugement : la même police peut être servie sans connexion à Google. C’est une décision allemande, pas une jurisprudence française, mais son raisonnement s’appuie sur le RGPD, qui s’applique aussi en France. L’auto-hébergement supprime le problème à la racine.

Il ne coûte pas plus cher en poids. Voici ce que Google Fonts servait le 23 octobre 2026 pour la graisse normale, comparé aux fichiers que nous produisons nous-mêmes :

Famille Google : fichier arabe Google : fichier latin Notre sous-ensemble arabe
Tajawal 8,9 ko 10,3 ko 8,7 ko
Almarai 31,7 ko 17,5 ko 31,0 ko
Noto Naskh Arabic 52,7 ko 11,5 ko –
Amiri 108,6 ko 19,5 ko 107,7 ko

Pour Noto Naskh Arabic, Google découpe même cinq fichiers par graisse : arabe, latin, latin étendu, symboles et mathématiques. Retenez surtout l’écart entre familles : une naskhi calligraphique comme Amiri pèse douze fois le poids d’une police sans empattement comme Tajawal. Le choix de la police compte plus que la méthode de chargement.

La règle @font-face arabe, ligne par ligne

Une règle par graisse livrée. Voici la graisse normale de Tajawal :

@font-face {
  font-family: "Tajawal";
  src: url("../fonts/tajawal-arabe-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF,
                 U+FB50-FDFF, U+FE70-FEFF, U+200C-200D;
}
  • font-family : le nom que vous utiliserez ensuite ; il n’a pas besoin d’être celui du fichier.
  • src : un seul format, WOFF2, que tous les navigateurs actuels lisent. Le chemin se calcule depuis le fichier CSS, pas depuis la page.
  • font-weight et font-style : ils doivent décrire le fichier. Un gras non déclaré est fabriqué par le navigateur : chargé seulement en 400, Noto Naskh Arabic est sorti dans Chrome en gras synthétique, épaissi et baveux, sur chaque balise <b>.
  • font-display: swap : le texte s’affiche tout de suite dans une police système, puis bascule. Pour un long texte courant, optional évite la bascule si la police arrive tard.
  • unicode-range : la liste des caractères que ce fichier sait dessiner (section suivante).

On applique ensuite la police au document :

html:lang(ar) {
  font-family: "Tajawal", system-ui, sans-serif;
  line-height: 1.7;
}

Le préfixe html n’est pas décoratif. Écrite seule, la pseudo-classe :lang(ar) vise chaque descendant d’un bloc arabe, car la langue s’hérite. Un cas fréquent dans un thème : vous donnez une police naskhi à une classe de contenu, puis une règle générale :lang(ar) vient la contredire à l’intérieur. Nous l’avons reproduit avec une classe .naskh : le paragraphe restait en Noto Naskh Arabic, mais son <em> et ses chiffres repassaient en Tajawal. Pour des passages arabes dans un site en français, préférez le sélecteur d’attribut [lang|="ar"] : il ne vise que les éléments qui portent l’attribut, et la forme |= couvre aussi ar-MA, ar-DZ ou ar-TN.

unicode-range : ce que le navigateur télécharge vraiment

Les plages ci-dessus correspondent aux blocs arabes de la base de données Unicode (version 18.0) : Arabe U+0600-06FF, Supplément U+0750-077F, Extensions B et A U+0870-08FF, formes de présentation A et B U+FB50-FDFF et U+FE70-FEFF. On y ajoute l’antiliant et le liant sans chasse, U+200C-200D, qui commandent la liaison entre deux lettres. Google Fonts sert une liste plus fine, qui écarte quelques points de code non attribués.

Schéma : dans une ligne mixte, lettres et chiffres arabes viennent d’arabic.woff2 ; latin, chiffres occidentaux et espaces de latin.woff2
Chaque caractère est servi par le fichier dont la plage le contient. L’espace appartient au fichier latin.

Pour un site bilingue français-arabe, c’est le réglage le plus rentable. Nous avons déclaré Tajawal en deux fichiers sous un même nom, l’un arabe, l’autre latin, puis suivi l’onglet Réseau : sur une page sans arabe, seul le fichier latin est parti, et le lecteur francophone ne télécharge rien pour l’arabe. L’inverse n’est pas vrai. Une page rédigée uniquement en arabe a demandé le fichier latin elle aussi, à cause de l’espace (U+0020), qui appartient à la plage latine.

Le même mécanisme permet d’associer un latin et un arabe de deux familles différentes sous un seul nom. Une famille qui dessine déjà les deux écritures, comme IBM Plex Sans Arabic ou Tajawal, vous épargne ce montage ; on en trouve d’autres parmi les polices arabes sans empattement.

Créer vos fichiers WOFF2 avec pyftsubset

Nos téléchargements contiennent les fichiers TTF d’origine et leur licence. Pour le web, transformez-les en sous-ensembles WOFF2 avec pyftsubset, l’outil de la bibliothèque fontTools. Sous Windows, dans PowerShell, avec Python installé :

py -m pip install fonttools brotli
pyftsubset Tajawal-Regular.ttf --unicodes="U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200D" --layout-features="*" --flavor=woff2 --output-file=tajawal-arabe-400.woff2

Si PowerShell ne trouve pas pyftsubset, remplacez-le par py -m fontTools.subset. Brotli est nécessaire pour écrire du WOFF2.

Faut-il --layout-features="*" pour que les lettres se lient ? Non. Selon la documentation de fontTools, l’outil conserve par défaut les fonctionnalités indispensables à la mise en forme d’une écriture : formes initiales, médianes et finales (voir les formes contextuelles des lettres arabes), ligature lam-alif, placement des voyelles. Nous l’avons vérifié : un sous-ensemble par défaut de Tajawal ou d’Amiri se lie correctement. L’option sert à garder le reste, les fonctionnalités facultatives : les huit jeux stylistiques d’Amiri, ses chiffres proportionnels, le kaf alternatif d’IBM Plex Sans Arabic. Si votre maquette en utilise une, le sous-ensemble par défaut l’aura supprimée sans prévenir.

Deux mesures pour décider du reste. Supprimer les instructions de rendu à petite taille (--no-hinting) fait passer le sous-ensemble arabe d’Almarai de 31,0 à 17,6 ko et celui d’IBM Plex Sans Arabic de 39,1 à 29,4 ko, mais ne change rien pour Tajawal. Vérifiez alors le texte en petit corps sous Windows avant de publier. À l’inverse, les fonctionnalités facultatives d’Amiri coûtent 8,8 ko (98,9 ko sans, 107,7 ko avec).

La licence SIL Open Font License, celle de 92 des 109 familles de notre catalogue (les autres sont sous licence Apache 2.0 ou GPL avec exception pour les polices ; un sous-ensemble GPL servi sur un site reste sous GPL, avec sa source), autorise ces sous-ensembles, avec une réserve que la FAQ de la licence rappelle : un sous-ensemble est une version modifiée, qui ne peut pas porter un « nom de police réservé ». IBM Plex Sans Arabic réserve « Plex » ; pour cette famille, servez les fichiers publiés par IBM ou par Google tels quels, ou renommez votre sous-ensemble. Pour les polices système et les polices commerciales, voyez ce que permet la licence d’une police arabe sur un site.

Dans WordPress : thème enfant, theme.json ou bibliothèque de polices

Thème classique : un thème enfant

Ne modifiez jamais le thème parent : la prochaine mise à jour effacerait vos fichiers. Créez un thème enfant (un dossier, un style.css avec l’en-tête Template: qui nomme le dossier du parent), placez les WOFF2 dans un sous-dossier fonts, écrivez vos @font-face dans le style.css de l’enfant avec des chemins relatifs (url("fonts/tajawal-arabe-400.woff2")), puis chargez la feuille dans functions.php :

add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style( 'enfant', get_stylesheet_uri() );
} );

add_action( 'wp_head', function () {
    printf(
        '<link rel="preload" href="%s" as="font" type="font/woff2" crossorigin>',
        esc_url( get_theme_file_uri( 'fonts/tajawal-arabe-400.woff2' ) )
    );
}, 1 );

Le second bloc précharge la police du premier écran. L’attribut crossorigin y est obligatoire, même pour un fichier hébergé sur votre domaine, car les polices sont toujours demandées en mode CORS : sans lui, Chrome 155 a téléchargé notre fichier arabe deux fois. Préchargez un ou deux fichiers, pas toute la famille.

Avant de copier le premier bloc, regardez comment le parent charge sa feuille. S’il utilise get_stylesheet_uri(), il charge déjà celle de l’enfant, et la vôtre arriverait deux fois ; s’il ne charge que sa propre feuille, il faut au contraire ajouter la sienne. La documentation des thèmes enfants donne les deux cas.

Thème bloc : theme.json

Un thème bloc déclare ses polices dans theme.json, sous settings.typography.fontFamilies ; WordPress écrit lui-même les @font-face. Le préfixe file:./ désigne un fichier du thème : WordPress le convertit avec get_theme_file_uri(), qui cherche d’abord dans le thème enfant. Le schéma officiel accepte fontDisplay (valeur par défaut : fallback) et unicodeRange :

{
  "version": 3,
  "settings": {
    "typography": {
      "fontFamilies": [
        {
          "name": "Tajawal",
          "slug": "tajawal",
          "fontFamily": "Tajawal, system-ui, sans-serif",
          "fontFace": [
            {
              "fontFamily": "Tajawal",
              "fontWeight": "400",
              "fontStyle": "normal",
              "fontDisplay": "swap",
              "src": [ "file:./assets/fonts/tajawal-arabe-400.woff2" ],
              "unicodeRange": "U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200D"
            }
          ]
        }
      ]
    }
  }
}

Le détail des propriétés figure dans la documentation typographique de theme.json.

Bibliothèque de polices

Depuis WordPress 6.5, l’éditeur des thèmes blocs propose une bibliothèque de polices. Quand vous y installez une police de la collection Google Fonts, WordPress copie les fichiers sur votre serveur (dans wp-content/uploads/fonts) : plus aucune requête vers Google. Contrôlez ensuite le poids des fichiers réellement servis.

Quelle que soit la méthode, et surtout après l’installation d’une extension « d’optimisation », ouvrez l’onglet Réseau du navigateur : aucune requête ne doit partir vers fonts.googleapis.com ni fonts.gstatic.com.

Les réglages CSS à revoir pour l’arabe

Un interligne trop serré

Un thème conçu pour le latin fixe souvent un interligne unique. Laissé à line-height: normal, l’interligne dépend au contraire des métriques de chaque police : dans les quatre familles testées, il va de 1,15 à 1,75.

Le même proverbe vocalisé en line-height normal : Readex Pro (1,15), Tajawal (1,40), Noto Naskh Arabic (1,70) et Amiri (1,75)
Le même proverbe, مَنْ جَدَّ وَجَدَ، وَمَنْ زَرَعَ حَصَدَ (man jadda wajada, wa-man zara‘a hasada, « qui persévère réussit, qui sème récolte »), avec l’interligne par défaut de chaque police.

Avec Readex Pro, la chadda et la fatha frôlent les jambages de la ligne du dessus. Donnez à l’arabe sa propre valeur, plus haute que celle du latin (nous visons 1,6 à 1,8 pour le texte courant et 1,3 à 1,4 pour les titres), et jugez-la sur un texte vocalisé.

Sur-titres, boutons et majuscules espacées

Beaucoup de thèmes composent sur-titres, menus et boutons en capitales espacées : text-transform: uppercase et letter-spacing. Le premier ne fait rien à l’arabe, qui n’a pas de casse. Le second est plus sournois. La spécification CSS Text interdit au navigateur d’espacer des lettres arabes s’il ne sait pas les allonger proprement, et c’est ce que nous avons constaté : Chrome 155 et Firefox 158 ont laissé les lettres arabes liées et n’ont espacé que les mots et le latin. Rien ne casse, mais un bouton bilingue sort déséquilibré, latin aéré, arabe serré. Neutralisez la règle pour l’arabe : :lang(ar) { letter-spacing: normal; } (ici, que :lang() atteigne chaque descendant est précisément ce qu’on veut).

Le bouton Italique de l’éditeur

Le bouton Italique de l’éditeur insère une balise <em>. Aucune des polices de cet article n’a d’italique : le navigateur en fabrique donc un en penchant l’arabe vers la droite, à la manière d’un italique latin, ce qui se lit comme un défaut d’affichage. Chrome et Firefox l’ont fait tous les deux ; font-synthesis-style: none l’a empêché dans les deux. Pour l’arabe, l’emphase passe par la graisse ou la couleur.

Gauche et droite écrites en dur

Un margin-left ou un text-align: left reste à gauche en arabe. Écrivez margin-inline-start, padding-inline-end et text-align: start : la même feuille de style suit alors le sens fixé par dir, sans fichier RTL séparé.

Les numéros dans une phrase arabe

Dans un paragraphe de droite à gauche, nous avons écrit اتصل بنا على (ittasil bina ‘ala, « appelez-nous au ») suivi de +33 6 12 34 56 78. Chrome a inversé l’ordre des groupes de chiffres : les espaces entre eux prennent le sens du paragraphe. Entouré de <bdi dir="ltr">, le numéro s’est affiché dans le bon ordre. Faites de même pour les références, les codes et les prix à plusieurs groupes. Si ce sont les lettres elles-mêmes qui s’inversent ou se détachent, la cause est ailleurs : voyez notre guide du texte arabe à l’envers ou en lettres séparées.

Contrôle avant mise en ligne

  1. Onglet Réseau : aucune requête vers Google, un seul téléchargement par fichier, le fichier latin présent aussi sur les pages arabes.
  2. Liaison : يستطيع (yastati‘, « il peut ») doit être lié d’un bout à l’autre.
  3. Ligature : لا (la, « non ») et الآن (al-an, « maintenant ») forment un seul signe lam-alif.
  4. Voyelles : مَنْ جَدَّ وَجَدَ sans collision entre lignes.
  5. Un numéro de téléphone et un prix dans une phrase arabe, dans le bon ordre.
  6. Un <em> et un <strong> : ni penché, ni gras synthétique.

Pour tester vos polices sur votre ordinateur avant de les intégrer, voyez comment installer une police arabe sur Windows, Mac ou Linux. Et si le choix de la famille reste ouvert, notre méthode pour choisir une police arabe part de l’usage réel du site, et notre sélection réunit toutes les polices arabes pour un site web.