Grâce au fichier theme.jon, vous pouvez gérer facilement vos fonts (polices) et par conséquence, avoir accès aux fonts dans l’éditeur Gutenberg.

Comme pour le reste, cela permet d’harmoniser les éléments entre l’éditeur Gutenberg et la partie front.

Il suffit donc de définir les polices dans le fichier theme.json et l’API génère le code pour charger les polices.

A noter que l’API fonctionne pour le moment, uniquement avec des polices locales.
Il n’est pas possible de mettre une url du type Google Font.

Le fichier theme.json

Voici par exemple, la déclaration des polices pour le site wp-performance.com

"typography": {
    "fontFamilies": [
    {
        "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
        "name": "System Font",
        "slug": "system-font"
    },
    {
        "fontFace": [
        {
            "fontFamily": "Sora",
            "fontStretch": "25% 151%",
            "fontWeight": "100 800",
            "fontStyle": "oblique 0deg 10deg",
            "unicodeRange": "U+000-5FF;",
            "src": ["file:./assets/fonts/Sora-VariableFont_wght.woff2"]
        }
        ],
        "fontFamily": "\"Sora\", sans-serif",
        "name": "Sora",
        "slug": "Sora"
    },
    {
        "fontFace": [
        {
            "fontFamily": "Lora",
            "fontStretch": "normal",
            "fontStyle": "normal",
            "fontWeight": "400",
            "src": ["file:./assets/fonts/Lora-Regular.woff2"]
        },
        {
            "fontFamily": "Lora",
            "fontStretch": "normal",
            "fontStyle": "italic",
            "fontWeight": "400",
            "src": ["file:./assets/fonts/Lora-Italic.woff2"]
        },
        {
            "fontFamily": "Lora",
            "fontStretch": "normal",
            "fontStyle": "italic",
            "fontWeight": "700",
            "src": ["file:./assets/fonts/Lora-BoldItalic.woff2"]
        },
        {
            "fontFamily": "Lora",
            "fontStretch": "normal",
            "fontStyle": "normal",
            "fontWeight": "700",
            "src": ["file:./assets/fonts/Lora-Bold.woff2"]
        }
        ],
        "fontFamily": "\"Lora\", serif",
        "name": "Lora",
        "slug": "Lora"
    }
  ],
}

Nous avons dans un premier bloc, la police par défaut.

{
   "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
   "name": "System Font",
   "slug": "system-font"
},

Ensuite, une police variable

{
  "fontFace": [
    {
     "fontFamily": "Sora",
     "fontStretch": "25% 151%",
     "fontWeight": "100 800",
     "fontStyle": "oblique 0deg 10deg",
     "unicodeRange": "U+000-5FF;",
     "src": ["file:./assets/fonts/Sora-VariableFont_wght.woff2"]
    }
    ],
     "fontFamily": "\"Sora\", sans-serif",
     "name": "Sora",
     "slug": "Sora"
},

Et pour finir, une police classique sous différentes variantes

{
        "fontFace": [
        {
            "fontFamily": "Lora",
            "fontStretch": "normal",
            "fontStyle": "normal",
            "fontWeight": "400",
            "src": ["file:./assets/fonts/Lora-Regular.woff2"]
        },
        {
            "fontFamily": "Lora",
            "fontStretch": "normal",
            "fontStyle": "italic",
            "fontWeight": "400",
            "src": ["file:./assets/fonts/Lora-Italic.woff2"]
        },
        {
            "fontFamily": "Lora",
            "fontStretch": "normal",
            "fontStyle": "italic",
            "fontWeight": "700",
            "src": ["file:./assets/fonts/Lora-BoldItalic.woff2"]
        },
        {
            "fontFamily": "Lora",
            "fontStretch": "normal",
            "fontStyle": "normal",
            "fontWeight": "700",
            "src": ["file:./assets/fonts/Lora-Bold.woff2"]
        }
        ],
        "fontFamily": "\"Lora\", serif",
        "name": "Lora",
        "slug": "Lora"
    }

A noter, pour la source, on indique un fichier via "src": ["file:./assets/fonts/Lora-Bold.woff2"].
On part de l’endroit où se trouve le fichier theme.json et on va chercher le fichier de la font. Pour l’exemple assets/fonts/Lora-Bold.woff2

Le code généré

En sortie, WordPress ou plutôt Gutenberg va générer ce code :

@font-face {
  font-family: Sora;
  font-style: oblique 0deg 10deg;
  font-weight: 100 800;
  font-display: fallback;
  src: local(Sora), url('/wp-content/themes/wp-performance/assets/fonts/Sora-VariableFont_wght.woff2')
      format('woff2');
  font-stretch: 25% 151%;
  unicode-range: U+000-5FF;
}
@font-face {
  font-family: Lora;
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src: local(Lora),
    url('/wp-content/themes/wp-performance/assets/fonts/Lora-Regular.woff2')
      format('woff2');
  font-stretch: normal;
}
@font-face {
  font-family: Lora;
  font-style: italic;
  font-weight: 400;
  font-display: fallback;
  src: local(Lora),
    url('/wp-content/themes/wp-performance/assets/fonts/Lora-Italic.woff2')
      format('woff2');
  font-stretch: normal;
}
@font-face {
  font-family: Lora;
  font-style: italic;
  font-weight: 700;
  font-display: fallback;
  src: local(Lora),
    url('/wp-content/themes/wp-performance/assets/fonts/Lora-BoldItalic.woff2')
      format('woff2');
  font-stretch: normal;
}
@font-face {
  font-family: Lora;
  font-style: normal;
  font-weight: 700;
  font-display: fallback;
  src: local(Lora),
    url('/wp-content/themes/wp-performance/assets/fonts/Lora-Bold.woff2')
      format('woff2');
  font-stretch: normal;
}

On peut voir les polices définies dans ce code. La police par défaut étant une police système, elle n’est pas présente ici.

Vous pouvez retrouver ce code dans le code source de vos pages puisqu’il est injecté entre des balises <style id="webfonts-inline-css">

Donc je vous encourage vivement à utiliser la Web Fonts API pour injecter les polices sur vos sites WordPress.