Depuis l’introduction des polices web en 2009, les concepteurs de sites web ont bénéficié d’un riche ensemble de palettes typographiques. Ces polices ont été largement utilisées par le biais de la règle CSS @fontface, donnant aux concepteurs un moyen de s’affranchir des polices web-safe (système).

Divers formats de fichiers de polices étaient (et sont toujours) disponibles auprès de grandes fonderies de polices, notamment Google Fonts.

À l’époque, l’utilisation de polices web impliquait de travailler avec des fichiers distincts pour chaque poids et chaque style. Par exemple, des noms de fichiers comme les suivants indiquaient clairement comment la police s’afficherait à l’usage :

Roboto-Italic.woff2
Lato-BoldItalic.woff2
OpenSans-SemiBold.ttf
WorkSans-ExtraBold.ttf

Chaque variation devait être chargée comme son propre fichier. Cela augmentait le poids de la page, nécessitait plus de requêtes HTTP et ajoutait de la complexité lors du choix et de l’application des polices dans une conception.

L’essor des polices variables

En 2016, une avancée majeure dans le domaine de la typographie numérique est arrivée : les polices variables. Développées en collaboration par Google, Apple, Adobe et Microsoft, elles se sont rapidement imposées.

La caractéristique distinctive d’une police variable est qu’elle peut contenir l’un ou l’autre des éléments suivants, chacun d’entre eux étant connu sous le nom d’axe :

Axe Propriété CSS
poids font-weight
style font-style: italic
inclinaison font-style: oblique
étirement font-stretch
Axe de taille optique (opsz) font-variations-setting

Le format de fichier le plus utilisé est .woff2 (Web Open Font Format), un format hautement compressé qui est devenu une recommandation du W3C en 2018. Bien que des formats tels que .ttf et .otf puissent être utilisés comme police variable, le format le plus efficace est .woff2. Tous les navigateurs modernes prennent en charge les polices variables.

Pour plus de clarté, nous faisons ici la distinction entre « polices web » et « polices variables ». Dans la pratique, cependant, tu verras souvent les polices variables regroupées avec les polices web.

Pourquoi utiliser des polices variables ?

Il y a trois raisons principales d’utiliser des polices variables dans vos projets :

  1. Meilleures performances : Au lieu d’appeler plusieurs fichiers de police distincts (Normal, Gras, Italique, etc.), un seul fichier de police variable peut les couvrir tous. Cela signifie moins de requêtes HTTP et des temps de chargement plus rapides.
  2. Flexibilité de conception : Les polices variables vous donnent un contrôle précis. Par exemple, au lieu d’être bloqué sur font-weight: 500 ou 600, vous pouvez définir une valeur personnalisée comme 532.
  3. Typographie réactive : Comme les polices variables peuvent s’adapter en douceur, vous pouvez créer une typographie qui réagit sur tous les appareils. Un bon exemple : l’utilisation de font-weight: clamp() pour adapter le poids d’un écran à l’autre, sans les « sauts » abrupts que l’on obtient avec des fichiers de polices statiques.

Comment WordPress utilise les polices variables

Avec la sortie de WordPress 6.1 en novembre 2022, la prise en charge des polices variables a été ajoutée au système theme.json. La première démonstration en a été faite dans le thème Twenty Twenty-Three.

Personnalisation d’un thème avec des polices variables

Lorsque l’on travaille avec un thème enfant de TT5, on commence par mettre en file d’attente les styles du thème parent et du thème enfant.

Pour s’assurer que nos polices personnalisées apparaissent de manière cohérente dans l’éditeur et sur le site, nous mettons également en file d’attente un fichier fonts.css qui inclut les déclarations @font-face nécessaires.

<?php
// enqueue parent and child styles
add_action('wp_enqueue_scripts', function() {
   wp_enqueue_style(
       'parent-style',
       get_template_directory_uri() . '/style.css'
   );

   wp_enqueue_style(
       'child-style',
       get_stylesheet_uri(),
       array('parent-style'),
       wp_get_theme()->get('Version')
   );

   // enqueue custom fonts
   wp_enqueue_style(
       'child-fonts',
       get_stylesheet_directory_uri() . '/fonts.css',
       array(),
       wp_get_theme()->get('Version')
   );
});

Comme toujours, la façon dont les scripts sont mis en file d’attente dépend du thème lui-même. Il n’y a pas de méthode standard unique.

Pour nous assurer que nous avons correctement configuré notre thème enfant, nous effectuons ce test dans styles.css :

body { background: #0000ff; }

Ajouter des polices avec theme.json

TT5 inclut déjà par défaut deux polices variables : Manrope et Fira Code. Pour cet exemple, ajoutons Vollkorn et faisons-en la police d’en-tête par défaut avec un poids de 600.

Voici la partie concernée de theme.json :

{
  "$schema": "https://schemas.wp.org/wp/6.7/theme.json",
  "version": 3,
  "settings": {
    "appearanceTools": true,
    "typography": {
      "fontFamilies": [
        {
          "name": "Manrope",
          "slug": "manrope",
          "fontFamily": "Manrope, sans-serif",
          "fontFace": [
            {
              "fontFamily": "Manrope",
              "src": ["file:../twentytwentyfive/assets/fonts/manrope/Manrope-VariableFont_wght.woff2"],
              "fontWeight": "200 800",
              "fontStyle": "normal"
            }
          ]
        },
        {
          "name": "Fira Code",
          "slug": "fira-code",
          "fontFamily": ""Fira Code", monospace",
          "fontFace": [
            {
              "fontFamily": ""Fira Code"",
              "src": ["file:../twentytwentyfive/assets/fonts/fira-code/FiraCode-VariableFont_wght.woff2"],
              "fontWeight": "300 700",
              "fontStyle": "normal"
            }
          ]
        },
        {
          "name": "Vollkorn",
          "slug": "vollkorn",
          "fontFamily": "Vollkorn, serif",
          "fontFace": [
            {
              "fontFamily": "Vollkorn",
              "src": ["file:../twentytwentyfive/assets/fonts/vollkorn/Vollkorn-VariableFont_wght.woff2"],
              "fontWeight": "400 900",
              "fontStyle": "normal"
            },
            {
              "fontFamily": "Vollkorn",
              "src": ["file:../twentytwentyfive/assets/fonts/vollkorn/Vollkorn-Italic-VariableFont_wght.woff2"],
              "fontWeight": "400 900",
              "fontStyle": "italic"
            }
          ]
        }
      ],
      "customFontSize": true,
      "fluid": true
    }
  },
  "styles": {
    "typography": {
      "fontFamily": "var:preset|font-family|manrope"
    },
    "elements": {
      "heading": {
        "typography": {
          "fontFamily": "var:preset|font-family|vollkorn",
          "fontWeight": "600"
        }
      }
    }
  }
}

Le résultat est l’apparition de la police Vollkorn sur l’ensemble du site.

La police Vollkorn est désormais disponible dans la bibliothèque de polices de WordPress.
La police Vollkorn est désormais disponible dans la bibliothèque de polices de WordPress.

Plusieurs choses à noter :

  • Vous pouvez souhaiter copier sur vothe thème les fichiers de code Manrope et Fira au cas où TT5 serait mis à jour avec de nouveaux chemins d’accès aux fichiers.
  • Il peut sembler que le code de ces polices soit redondant, puisqu’elles sont déjà enregistrées par le thème parent. Cependant, il est important de les déclarer dans ton votre enfant. Cela permet de s’assurer qu’elles s’affichent correctement dans l’interface utilisateur de la bibliothèque de polices et qu’elles restent disponibles même si le thème parent se met à jour avec de nouveaux chemins d’accès aux fichiers ou des modifications.
  • Nous faisons référence à deux fichiers Vollkorn différents.

S’assurer que les polices se chargent correctement

Parfois, les polices ne s’affichent pas correctement sur le site avant que vous ne les déclariez en CSS. Voici un exemple typique styles.css :

/*
Theme Name: TT5 Child
Template: twentytwentyfive
Version: 1.0
*/

/* Ensure fonts are loaded and applied */
body {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
}

code,
pre {
  font-family: 'Fira Code', 'Courier New', monospace;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Vollkorn', 'Times New Roman', serif;
}

Et dans fonts.css, nous déclarons les fichiers de police à l’aide de @font-face. Cela permet de s’assurer que le navigateur sait quelles polices charger et appliquer. Si vous voulez vraiment précharger des polices essentielles (par exemple, la police de votre titre principal), vous pouvez aussi ajouter un <link rel="preload"> au <head> du site par l’intermédiaire de crochets WordPress. Dans la plupart des cas, la règle @font-face avec font-display: swap offre un bon équilibre entre les performances et l’expérience de l’utilisateur.

/* Preload critical fonts for better performance */
@font-face {
  font-family: 'Manrope';
  src: url('../twentytwentyfive/assets/fonts/manrope/Manrope-VariableFont_wght.woff2')
       format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fira Code';
  src: url('../twentytwentyfive/assets/fonts/fira-code/FiraCode-VariableFont_wght.woff2')
       format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Vollkorn';
  src: url('../twentytwentyfive/assets/fonts/vollkorn/Vollkorn-VariableFont_wght.woff2')
       format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Vollkorn';
  src: url('../twentytwentyfive/assets/fonts/vollkorn/Vollkorn-Italic-VariableFont_wght.woff2')
       format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

Le résultat est une page où les titres, par défaut, sont en Vollkorn avec un poids de police de 600.

Police Vollkorn définie comme police de titre par défaut dans l'éditeur WordPress.
Police Vollkorn définie comme police de titre par défaut dans l’éditeur WordPress.

Si vous préférez, vous pouvez inclure les at-rules @font-face dans styles.css. Cela supprimerait également la nécessité de mettre en file d’attente le fichier fonts.css.

Faciliter le choix du poids des polices pour les utilisateurs

L’un des plus grands avantages des polices variables est que les poids ne sont pas limités à des valeurs fixes comme 400 ou 600. Vous pouvez utiliser n’importe quelle valeur entre 100 et 900. Le problème, c’est que WordPress ne fournit pas d’interface utilisateur pour choisir ces polices personnalisées.

Pour résoudre ce problème, nous avons créé une extension minimale appelée Font Weight Options. Elle ajoute une page de réglages sous Apparence > Poids de la police, où vous pouvez définir des poids personnalisés pour le corps du texte, les titres et les blocs de code.

Voici un aperçu de la logique de base :

<?php
/**
 * Plugin Name: Font Weight Options
 */

class Font_Weight_Options {
    public function __construct() {
        add_action( 'admin_menu', array( $this, 'add_admin_menu' ) );
        add_action( 'wp_head', array( $this, 'apply_font_weights_frontend' ) );
    }

    public function add_admin_menu() {
        add_theme_page(
            __( 'Font Weight Settings', 'font-weight-options' ),
            __( 'Font Weight', 'font-weight-options' ),
            'manage_options',
            'font-weight-settings',
            array( $this, 'render_admin_page' )
        );
    }

    public function apply_font_weights_frontend() {
        $weights = get_option( 'fwo_font_weights', array(
            'body' => 400,
            'headings' => 600,
            'code' => 400,
        ) );

        echo "<style>
            body { font-weight: {$weights['body']} !important; }
            h1, h2, h3, h4, h5, h6 { font-weight: {$weights['headings']} !important; }
            code, pre { font-weight: {$weights['code']} !important; }
        </style>";
    }
}

new Font_Weight_Options();

L’extrait ci-dessus montre la logique de base. Nous avons publié le code source complet sur GitHub Gist si vous souhaitez voir l’extension complète, y compris le formulaire de réglages et la validation.

La version complète ajoute :

  • Valeurs par défaut à l’activation de l’extension
  • Un formulaire de configuration simple avec des champs numériques (100-900)
  • Validation pour maintenir les valeurs dans l’intervalle
  • L’affichage des poids dans l’éditeur de blocs et dans l’interface utilisateur.

Le résultat est cette nouvelle page dans notre WP Admin, qui permet aux utilisateurs de définir les valeurs de poids des polices pour nos trois polices. Nous avons choisi trois valeurs « non standard ».

Nouvelle page de réglages des poids des polices dans le tableau de bord d'administration de WordPress.
Nouvelle page de réglages des poids des polices dans le tableau de bord d’administration de WordPress.

Le résultat est une page avec ces poids de police correspondants qui s’affichent comme prévu dans l’éditeur de page et dans l’interface publique.

Page du tableau de bord d'administration de WordPress affichant trois polices avec les largeurs qui leur sont attribuées.
Page du tableau de bord d’administration de WordPress affichant trois polices avec les largeurs qui leur sont attribuées.

Une façon plus gentille et plus simple d’ajouter une seule police variable.

Si vous avez trouvé cela accablant, nous avons une alternative qui n’est pas entièrement fonctionnelle mais qui est un moyen rapide d’obtenir n’importe quel type de police dans votre thème.

Les utilisateurs peuvent facilement ajouter des polices Google via la bibliothèque de polices. Si c’est ce que vous préférez, jetez un coup d’œil à notre article sur les 15 meilleures polices Google en chiffres (plus des conseils pour les utiliser), qui vous aidera.

Mais qu’en est-il si vous préférez autre chose qu’une police Google ? Il existe de nombreuses façons d’obtenir des polices open source sous licence appropriée pour vos projets. Nous nous sommes tournés vers GitHub pour obtenir SourceSans3VF-Upright, une police Adobe.

Notre objectif est de l’utiliser comme police optionnelle qui s’affichera correctement dans l’éditeur et le frontend.

Le fichier de police est placé dans le dossier /assets/fonts de notre thème enfant. À partir de là, nous avons créé functions.php.

<?php
/**
 * Enqueue parent and child theme styles.
 */
function twentytwentyfive_kinstachild_enqueue_styles() {
    // Parent theme style.
    wp_enqueue_style(
        'twentytwentyfive-style',
        get_parent_theme_file_uri( 'style.css' ),
        array(),
        wp_get_theme()->get( 'Version' )
    );

    // Child theme style.
    wp_enqueue_style(
        'twentytwentyfive-child-style',
        get_stylesheet_uri(),
        array( 'twentytwentyfive-style' ),
        wp_get_theme()->get( 'Version' )
    );
}
add_action( 'wp_enqueue_scripts', 'twentytwentyfive_kinstachild_enqueue_styles' );

/**
 * Enqueue child theme styles in the editor.
 */
add_action( 'after_setup_theme', function() {
    add_editor_style( 'style.css' );
} );

Comme dans l’exemple précédent, notre fichier theme.json doit faire référence aux codes Manrope et Fira du parent. En les omettant, nous les supprimerions de notre thème.

{
  "$schema": "https://schemas.wp.org/wp/6.7/theme.json",
  "version": 3,
  "settings": {
    "typography": {
      "fontFamilies": [
        {
          "name": "Manrope",
          "slug": "manrope",
          "fontFamily": "Manrope, sans-serif",
          "fontFace": [
            {
              "src": [
                "file:../twentytwentyfive/assets/fonts/manrope/Manrope-VariableFont_wght.woff2"
              ],
              "fontWeight": "100 900",
              "fontStyle": "normal",
              "fontFamily": "Manrope"
            }
          ]
        },
        {
          "name": "Fira Code",
          "slug": "fira-code",
          "fontFamily": ""Fira Code", monospace",
          "fontFace": [
            {
              "src": [
                "file:../twentytwentyfive/assets/fonts/fira-code/FiraCode-VariableFont_wght.woff2"
              ],
              "fontWeight": "100 900",
              "fontStyle": "normal",
              "fontFamily": ""Fira Code""
            }
          ]
        },
        {
          "name": "Source Sans 3",
          "slug": "source-sans-3",
          "fontFamily": ""Source Sans 3", sans-serif",
          "fontFace": [
            {
              "src": [
                "file:./assets/fonts/SourceSans3VF-Upright.woff2"
              ],
              "fontWeight": "100 900",
              "fontStyle": "normal",
              "fontFamily": "Source Sans 3"
            }
          ]
        }
      ]
    }
  }
}

N’oubliez pas que vous avez toujours besoin d’un fichier styles.css de base pour inclure les métadonnées essentielles indiquant à WordPress que vous travaillez avec un thème enfant.

Résumé

Que vous optiez pour une configuration entièrement personnalisée ou pour une intégration rapide, les polices variables de WordPress offrent un moyen puissant d’améliorer la typographie de votre site. Elles améliorent les performances, réduisent la complexité et vous offrent des options de conception souples et flexibles qui ne sont tout simplement pas possibles avec les polices statiques traditionnelles.

Pour libérer tout leur potentiel, vous devrez peut-être créer une interface utilisateur personnalisée qui expose les axes variables (comme le poids, l’inclinaison ou la taille optique) et donne aux propriétaires du site plus de contrôle.

Si vous construisez un site WordPress sur la plateforme d’hébergement de Kinsta, vous bénéficierez également de leur infrastructure axée sur les performances, ce qui facilitera encore plus le service efficace de ressources modernes telles que les polices variables.

Bud Kraus

Bud Kraus has been working with WordPress as an in-class and online instructor, site developer, and content creator since 2009. He has produced instructional videos and written many articles for WordPress businesses.