{"id":81058,"date":"2025-09-25T08:22:18","date_gmt":"2025-09-25T07:22:18","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=81058&#038;preview=true&#038;preview_id=81058"},"modified":"2025-09-26T12:30:01","modified_gmt":"2025-09-26T11:30:01","slug":"polices-variables","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/polices-variables\/","title":{"rendered":"Utiliser des polices variables dans les th\u00e8mes WordPress"},"content":{"rendered":"<p>Depuis l&rsquo;introduction des <a href=\"https:\/\/kinsta.com\/fr\/blog\/polices-caracteres-web-safe\/\">polices web<\/a> en 2009, les concepteurs de sites web ont b\u00e9n\u00e9fici\u00e9 d&rsquo;un riche ensemble de palettes typographiques. Ces polices ont \u00e9t\u00e9 largement utilis\u00e9es par le biais de la r\u00e8gle <a href=\"https:\/\/kinsta.com\/fr\/blog\/css-wordpress\/\">CSS<\/a> <code>@fontface<\/code>, donnant aux concepteurs un moyen de s&rsquo;affranchir des polices web-safe (syst\u00e8me).<\/p>\n<p>Divers formats de fichiers de polices \u00e9taient (et sont toujours) disponibles aupr\u00e8s de grandes fonderies de polices, notamment <a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleures-polices-google-fonts\/\">Google Fonts<\/a>.<\/p>\n<p>\u00c0 l&rsquo;\u00e9poque, l&rsquo;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&rsquo;afficherait \u00e0 l&rsquo;usage :<\/p>\n<pre><code class=\"language-bash\">Roboto-Italic.woff2\nLato-BoldItalic.woff2\nOpenSans-SemiBold.ttf\nWorkSans-ExtraBold.ttf<\/code><\/pre>\n<p>Chaque variation devait \u00eatre charg\u00e9e comme son propre fichier. Cela augmentait le poids de la page, n\u00e9cessitait plus de requ\u00eates HTTP et ajoutait de la complexit\u00e9 lors du choix et de l&rsquo;application des polices dans une conception.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Tu as besoin d&rsquo;un petit rappel sur les polices de caract\u00e8res web ? Jetez un coup d&rsquo;\u0153il \u00e0 notre guide : <em><a href=\"https:\/\/kinsta.com\/fr\/blog\/comment-changer-polices-wordpress\/#terminology\">Comment changer les polices dans WordPress (et changer la taille, la couleur, l&rsquo;optimisation)<\/a>.<\/em><\/p>\n<\/aside>\n\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>L&rsquo;essor des polices variables<\/h2>\n<p>En 2016, une avanc\u00e9e majeure dans le domaine de la typographie num\u00e9rique est arriv\u00e9e : les polices variables. D\u00e9velopp\u00e9es en collaboration par Google, Apple, Adobe et Microsoft, elles se sont rapidement impos\u00e9es.<\/p>\n<p>La caract\u00e9ristique distinctive d&rsquo;une police variable est qu&rsquo;elle peut contenir l&rsquo;un ou l&rsquo;autre des \u00e9l\u00e9ments suivants, chacun d&rsquo;entre eux \u00e9tant connu sous le nom d&rsquo;axe :<\/p>\n<table>\n<tbody>\n<tr>\n<td colspan=\"1\" rowspan=\"1\"><strong>Axe <\/strong><\/td>\n<td colspan=\"1\" rowspan=\"1\"><strong>Propri\u00e9t\u00e9 CSS <\/strong><\/td>\n<\/tr>\n<tr>\n<td colspan=\"1\" rowspan=\"1\">poids<\/td>\n<td colspan=\"1\" rowspan=\"1\"><code>font-weight<\/code><\/td>\n<\/tr>\n<tr>\n<td colspan=\"1\" rowspan=\"1\">style<\/td>\n<td colspan=\"1\" rowspan=\"1\"><code>font-style: italic<\/code><\/td>\n<\/tr>\n<tr>\n<td colspan=\"1\" rowspan=\"1\">inclinaison<\/td>\n<td colspan=\"1\" rowspan=\"1\"><code>font-style: oblique<\/code><\/td>\n<\/tr>\n<tr>\n<td colspan=\"1\" rowspan=\"1\">\u00e9tirement<\/td>\n<td colspan=\"1\" rowspan=\"1\"><code>font-stretch<\/code><\/td>\n<\/tr>\n<tr>\n<td colspan=\"1\" rowspan=\"1\">Axe de taille optique (opsz)<\/td>\n<td colspan=\"1\" rowspan=\"1\"><code>font-variations-setting<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Le format de fichier le plus utilis\u00e9 est <code>.woff2<\/code> (Web Open Font Format), un format hautement compress\u00e9 qui est devenu une <a href=\"https:\/\/www.w3.org\/blog\/2018\/wcag21-rec\/\">recommandation du W3C<\/a> en 2018. Bien que des formats tels que <code>.ttf<\/code> et <code>.otf<\/code> puissent \u00eatre utilis\u00e9s comme police variable, le format le plus efficace est <code>.woff2<\/code>. Tous les navigateurs modernes prennent en charge les polices variables.<\/p>\n<p>Pour plus de clart\u00e9, nous faisons ici la distinction entre \u00ab polices web \u00bb et \u00ab polices variables \u00bb. Dans la pratique, cependant, tu verras souvent les polices variables regroup\u00e9es avec les polices web.<\/p>\n<h3>Pourquoi utiliser des polices variables ?<\/h3>\n<p>Il y a trois raisons principales d&rsquo;utiliser des polices variables dans vos projets :<\/p>\n<ol start=\"1\">\n<li><strong>Meilleures performances :<\/strong> Au lieu d&rsquo;appeler plusieurs fichiers de police distincts (Normal, Gras, Italique, etc.), un seul fichier de police variable peut les couvrir tous. Cela signifie moins de <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-une-requete-http\/\">requ\u00eates HTTP<\/a> et des temps de chargement plus rapides.<\/li>\n<li><strong>Flexibilit\u00e9 de conception :<\/strong> Les polices variables vous donnent un contr\u00f4le pr\u00e9cis. Par exemple, au lieu d&rsquo;\u00eatre bloqu\u00e9 sur <code>font-weight: 500<\/code> ou <code>600<\/code>, vous pouvez d\u00e9finir une valeur personnalis\u00e9e comme <code>532<\/code>.<\/li>\n<li><strong>Typographie r\u00e9active :<\/strong> Comme les polices variables peuvent s&rsquo;adapter en douceur, vous pouvez cr\u00e9er une typographie qui r\u00e9agit sur tous les appareils. Un bon exemple : l&rsquo;utilisation de <code>font-weight: clamp()<\/code> pour adapter le poids d&rsquo;un \u00e9cran \u00e0 l&rsquo;autre, sans les \u00ab sauts \u00bb abrupts que l&rsquo;on obtient avec des fichiers de polices statiques.<\/li>\n<\/ol>\n<h2>Comment WordPress utilise les polices variables<\/h2>\n<p>Avec la sortie de <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-6-1\/\">WordPress 6.1<\/a> en novembre 2022, la prise en charge des polices variables a \u00e9t\u00e9 ajout\u00e9e au syst\u00e8me <code>theme.json<\/code>. La premi\u00e8re d\u00e9monstration en a \u00e9t\u00e9 faite dans le th\u00e8me <a href=\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty-three\/\">Twenty Twenty-Three<\/a>.<\/p>\n<h3>Personnalisation d&rsquo;un th\u00e8me avec des polices variables<\/h3>\n<p>Lorsque l&rsquo;on travaille avec un <a href=\"https:\/\/kinsta.com\/fr\/blog\/theme-enfant-wordpress\/\">th\u00e8me enfant<\/a> de TT5, on commence par mettre en file d&rsquo;attente les styles du th\u00e8me parent et du th\u00e8me enfant.<\/p>\n<p>Pour s&rsquo;assurer que nos polices personnalis\u00e9es apparaissent de mani\u00e8re coh\u00e9rente dans l&rsquo;\u00e9diteur et sur le site, nous mettons \u00e9galement en file d&rsquo;attente un fichier <code>fonts.css<\/code> qui inclut les d\u00e9clarations <code>@font-face<\/code> n\u00e9cessaires.<\/p>\n<pre><code class=\"language-php\">&lt;?php\n\/\/ enqueue parent and child styles\nadd_action('wp_enqueue_scripts', function() {\n   wp_enqueue_style(\n       'parent-style',\n       get_template_directory_uri() . '\/style.css'\n   );\n\n   wp_enqueue_style(\n       'child-style',\n       get_stylesheet_uri(),\n       array('parent-style'),\n       wp_get_theme()-&gt;get('Version')\n   );\n\n   \/\/ enqueue custom fonts\n   wp_enqueue_style(\n       'child-fonts',\n       get_stylesheet_directory_uri() . '\/fonts.css',\n       array(),\n       wp_get_theme()-&gt;get('Version')\n   );\n});<\/code><\/pre>\n<p>Comme toujours, la fa\u00e7on dont les scripts sont mis en file d&rsquo;attente d\u00e9pend du th\u00e8me lui-m\u00eame. Il n&rsquo;y a pas de m\u00e9thode standard unique.<\/p>\n<p>Pour nous assurer que nous avons correctement configur\u00e9 notre th\u00e8me enfant, nous effectuons ce test dans <code>styles.css<\/code> :<\/p>\n<pre><code class=\"language-css\">body { background: #0000ff; }<\/code><\/pre>\n<h3>Ajouter des polices avec theme.json<\/h3>\n<p>TT5 inclut d\u00e9j\u00e0 par d\u00e9faut deux polices variables : <a href=\"https:\/\/fonts.google.com\/specimen\/Manrope\">Manrope<\/a> et <a href=\"https:\/\/fonts.google.com\/specimen\/Fira+Code\">Fira Code<\/a>. Pour cet exemple, ajoutons <a href=\"https:\/\/fonts.google.com\/specimen\/Vollkorn\">Vollkorn<\/a> et faisons-en la police d&rsquo;en-t\u00eate par d\u00e9faut avec un poids de 600.<\/p>\n<p>Voici la partie concern\u00e9e de <code>theme.json<\/code> :<\/p>\n<pre><code class=\"language-json\">{\n  \"$schema\": \"https:\/\/schemas.wp.org\/wp\/6.7\/theme.json\",\n  \"version\": 3,\n  \"settings\": {\n    \"appearanceTools\": true,\n    \"typography\": {\n      \"fontFamilies\": [\n        {\n          \"name\": \"Manrope\",\n          \"slug\": \"manrope\",\n          \"fontFamily\": \"Manrope, sans-serif\",\n          \"fontFace\": [\n            {\n              \"fontFamily\": \"Manrope\",\n              \"src\": [\"file:..\/twentytwentyfive\/assets\/fonts\/manrope\/Manrope-VariableFont_wght.woff2\"],\n              \"fontWeight\": \"200 800\",\n              \"fontStyle\": \"normal\"\n            }\n          ]\n        },\n        {\n          \"name\": \"Fira Code\",\n          \"slug\": \"fira-code\",\n          \"fontFamily\": \"\"Fira Code\", monospace\",\n          \"fontFace\": [\n            {\n              \"fontFamily\": \"\"Fira Code\"\",\n              \"src\": [\"file:..\/twentytwentyfive\/assets\/fonts\/fira-code\/FiraCode-VariableFont_wght.woff2\"],\n              \"fontWeight\": \"300 700\",\n              \"fontStyle\": \"normal\"\n            }\n          ]\n        },\n        {\n          \"name\": \"Vollkorn\",\n          \"slug\": \"vollkorn\",\n          \"fontFamily\": \"Vollkorn, serif\",\n          \"fontFace\": [\n            {\n              \"fontFamily\": \"Vollkorn\",\n              \"src\": [\"file:..\/twentytwentyfive\/assets\/fonts\/vollkorn\/Vollkorn-VariableFont_wght.woff2\"],\n              \"fontWeight\": \"400 900\",\n              \"fontStyle\": \"normal\"\n            },\n            {\n              \"fontFamily\": \"Vollkorn\",\n              \"src\": [\"file:..\/twentytwentyfive\/assets\/fonts\/vollkorn\/Vollkorn-Italic-VariableFont_wght.woff2\"],\n              \"fontWeight\": \"400 900\",\n              \"fontStyle\": \"italic\"\n            }\n          ]\n        }\n      ],\n      \"customFontSize\": true,\n      \"fluid\": true\n    }\n  },\n  \"styles\": {\n    \"typography\": {\n      \"fontFamily\": \"var:preset|font-family|manrope\"\n    },\n    \"elements\": {\n      \"heading\": {\n        \"typography\": {\n          \"fontFamily\": \"var:preset|font-family|vollkorn\",\n          \"fontWeight\": \"600\"\n        }\n      }\n    }\n  }\n}<\/code><\/pre>\n<p>Le r\u00e9sultat est l&rsquo;apparition de la police Vollkorn sur l&rsquo;ensemble du site.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/08\/vollkorn-in-wp.png\" alt=\"La police Vollkorn est d\u00e9sormais disponible dans la biblioth\u00e8que de polices de WordPress.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">La police Vollkorn est d\u00e9sormais disponible dans la biblioth\u00e8que de polices de WordPress.<\/figcaption><\/figure>\n<p>Plusieurs choses \u00e0 noter :<\/p>\n<ul>\n<li>Vous pouvez souhaiter copier sur vothe th\u00e8me les fichiers de code Manrope et Fira au cas o\u00f9 TT5 serait mis \u00e0 jour avec de nouveaux chemins d&rsquo;acc\u00e8s aux fichiers.<\/li>\n<li>Il peut sembler que le code de ces polices soit redondant, puisqu&rsquo;elles sont d\u00e9j\u00e0 enregistr\u00e9es par le th\u00e8me parent. Cependant, il est important de les d\u00e9clarer dans ton votre enfant. Cela permet de s&rsquo;assurer qu&rsquo;elles s&rsquo;affichent correctement dans l&rsquo;interface utilisateur de la biblioth\u00e8que de polices et qu&rsquo;elles restent disponibles m\u00eame si le th\u00e8me parent se met \u00e0 jour avec de nouveaux chemins d&rsquo;acc\u00e8s aux fichiers ou des modifications.<\/li>\n<li>Nous faisons r\u00e9f\u00e9rence \u00e0 deux fichiers Vollkorn diff\u00e9rents.<\/li>\n<\/ul>\n<h3>S&rsquo;assurer que les polices se chargent correctement<\/h3>\n<p>Parfois, les polices ne s&rsquo;affichent pas correctement sur le site avant que vous ne les d\u00e9clariez en CSS. Voici un exemple typique <code>styles.css<\/code> :<\/p>\n<pre><code class=\"language-css\">\/*\nTheme Name: TT5 Child\nTemplate: twentytwentyfive\nVersion: 1.0\n*\/\n\n\/* Ensure fonts are loaded and applied *\/\nbody {\n  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,\n               Oxygen-Sans, Ubuntu, Cantarell, sans-serif;\n}\n\ncode,\npre {\n  font-family: 'Fira Code', 'Courier New', monospace;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-family: 'Vollkorn', 'Times New Roman', serif;\n}<\/code><\/pre>\n<p>Et dans <code>fonts.css<\/code>, nous d\u00e9clarons les fichiers de police \u00e0 l&rsquo;aide de <code>@font-face<\/code>. Cela permet de s&rsquo;assurer que le navigateur sait quelles polices charger et appliquer. Si vous voulez <strong>vraiment pr\u00e9charger<\/strong> des polices essentielles (par exemple, la police de votre titre principal), vous pouvez aussi ajouter un <code>&lt;link rel=\"preload\"&gt;<\/code> au <code>&lt;head&gt;<\/code> du site par l&rsquo;interm\u00e9diaire de <a href=\"https:\/\/developer.wordpress.org\/plugins\/hooks\/\">crochets WordPress<\/a>. Dans la plupart des cas, la r\u00e8gle <code>@font-face<\/code> avec <code>font-display: swap<\/code> offre un bon \u00e9quilibre entre les performances et l&rsquo;exp\u00e9rience de l&rsquo;utilisateur.<\/p>\n<pre><code class=\"language-css\">\/* Preload critical fonts for better performance *\/\n@font-face {\n  font-family: 'Manrope';\n  src: url('..\/twentytwentyfive\/assets\/fonts\/manrope\/Manrope-VariableFont_wght.woff2')\n       format('woff2');\n  font-weight: 100 900;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Fira Code';\n  src: url('..\/twentytwentyfive\/assets\/fonts\/fira-code\/FiraCode-VariableFont_wght.woff2')\n       format('woff2');\n  font-weight: 100 900;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Vollkorn';\n  src: url('..\/twentytwentyfive\/assets\/fonts\/vollkorn\/Vollkorn-VariableFont_wght.woff2')\n       format('woff2');\n  font-weight: 100 900;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Vollkorn';\n  src: url('..\/twentytwentyfive\/assets\/fonts\/vollkorn\/Vollkorn-Italic-VariableFont_wght.woff2')\n       format('woff2');\n  font-weight: 100 900;\n  font-style: italic;\n  font-display: swap;\n}<\/code><\/pre>\n<p>Le r\u00e9sultat est une page o\u00f9 les titres, par d\u00e9faut, sont en Vollkorn avec un poids de police de 600.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/08\/using-vollkorn.png\" alt=\"Police Vollkorn d\u00e9finie comme police de titre par d\u00e9faut dans l'\u00e9diteur WordPress.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Police Vollkorn d\u00e9finie comme police de titre par d\u00e9faut dans l&rsquo;\u00e9diteur WordPress.<\/figcaption><\/figure>\n<p>Si vous pr\u00e9f\u00e9rez, vous pouvez inclure les at-rules <code>@font-face<\/code> dans <code>styles.css<\/code>. Cela supprimerait \u00e9galement la n\u00e9cessit\u00e9 de mettre en file d&rsquo;attente le fichier <code>fonts.css<\/code>.<\/p>\n<h2>Faciliter le choix du poids des polices pour les utilisateurs<\/h2>\n<p>L&rsquo;un des plus grands avantages des polices variables est que les poids ne sont pas limit\u00e9s \u00e0 des valeurs fixes comme 400 ou 600. Vous pouvez utiliser n&rsquo;importe quelle valeur entre <strong>100 et 900.<\/strong> Le probl\u00e8me, c&rsquo;est que WordPress ne fournit pas d&rsquo;interface utilisateur pour choisir ces polices personnalis\u00e9es.<\/p>\n<p>Pour r\u00e9soudre ce probl\u00e8me, nous avons cr\u00e9\u00e9 une <strong>extension minimale<\/strong> appel\u00e9e <em>Font Weight Options<\/em>. Elle ajoute une page de r\u00e9glages sous <strong>Apparence<\/strong> &gt; <strong>Poids de la police<\/strong>, o\u00f9 vous pouvez d\u00e9finir des poids personnalis\u00e9s pour le corps du texte, les titres et les blocs de code.<\/p>\n<p>Voici un aper\u00e7u de la logique de base :<\/p>\n<pre><code class=\"language-php\">&lt;?php\n\/**\n * Plugin Name: Font Weight Options\n *\/\n\nclass Font_Weight_Options {\n    public function __construct() {\n        add_action( 'admin_menu', array( $this, 'add_admin_menu' ) );\n        add_action( 'wp_head', array( $this, 'apply_font_weights_frontend' ) );\n    }\n\n    public function add_admin_menu() {\n        add_theme_page(\n            __( 'Font Weight Settings', 'font-weight-options' ),\n            __( 'Font Weight', 'font-weight-options' ),\n            'manage_options',\n            'font-weight-settings',\n            array( $this, 'render_admin_page' )\n        );\n    }\n\n    public function apply_font_weights_frontend() {\n        $weights = get_option( 'fwo_font_weights', array(\n            'body' =&gt; 400,\n            'headings' =&gt; 600,\n            'code' =&gt; 400,\n        ) );\n\n        echo \"&lt;style&gt;\n            body { font-weight: {$weights['body']} !important; }\n            h1, h2, h3, h4, h5, h6 { font-weight: {$weights['headings']} !important; }\n            code, pre { font-weight: {$weights['code']} !important; }\n        &lt;\/style&gt;\";\n    }\n}\n\nnew Font_Weight_Options();<\/code><\/pre>\n<p>L&rsquo;extrait ci-dessus montre la logique de base. Nous avons publi\u00e9 le <a href=\"https:\/\/gist.github.com\/olawanlejoel\/964409d74b71fb98e36b56179b8b09ec\">code source complet sur GitHub Gist<\/a> si vous souhaitez voir l&rsquo;extension compl\u00e8te, y compris le formulaire de r\u00e9glages et la validation.<\/p>\n<p>La version compl\u00e8te ajoute :<\/p>\n<ul>\n<li>Valeurs par d\u00e9faut \u00e0 l&rsquo;activation de l&rsquo;extension<\/li>\n<li>Un formulaire de configuration simple avec des champs num\u00e9riques (100-900)<\/li>\n<li>Validation pour maintenir les valeurs dans l&rsquo;intervalle<\/li>\n<li>L&rsquo;affichage des poids dans l&rsquo;\u00e9diteur de blocs et dans l&rsquo;interface utilisateur.<\/li>\n<\/ul>\n<p>Le r\u00e9sultat est cette nouvelle page dans notre WP Admin, qui permet aux utilisateurs de d\u00e9finir les valeurs de poids des polices pour nos trois polices. Nous avons choisi trois valeurs \u00ab non standard \u00bb.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/08\/new-font-weight.png\" alt=\"Nouvelle page de r\u00e9glages des poids des polices dans le tableau de bord d'administration de WordPress.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Nouvelle page de r\u00e9glages des poids des polices dans le tableau de bord d&rsquo;administration de WordPress.<\/figcaption><\/figure>\n<p>Le r\u00e9sultat est une page avec ces poids de police correspondants qui s&rsquo;affichent comme pr\u00e9vu dans l&rsquo;\u00e9diteur de page et dans l&rsquo;interface publique.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/08\/test-fonts-wp.png\" alt=\"Page du tableau de bord d'administration de WordPress affichant trois polices avec les largeurs qui leur sont attribu\u00e9es.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Page du tableau de bord d&rsquo;administration de WordPress affichant trois polices avec les largeurs qui leur sont attribu\u00e9es.<\/figcaption><\/figure>\n<h2>Une fa\u00e7on plus gentille et plus simple d&rsquo;ajouter une seule police variable.<\/h2>\n<p>Si vous avez trouv\u00e9 cela accablant, nous avons une alternative qui n&rsquo;est pas enti\u00e8rement fonctionnelle mais qui est un moyen rapide d&rsquo;obtenir n&rsquo;importe quel type de police dans votre th\u00e8me.<\/p>\n<p>Les utilisateurs peuvent facilement ajouter des polices Google via la biblioth\u00e8que de polices. Si c&rsquo;est ce que vous pr\u00e9f\u00e9rez, jetez un coup d&rsquo;\u0153il \u00e0 notre article sur les <a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleures-polices-google-fonts\/?utm_source=chatgpt.com\">15 meilleures polices Google en chiffres (plus des conseils pour les utiliser)<\/a>, qui vous aidera.<\/p>\n<p>Mais qu&rsquo;en est-il si vous pr\u00e9f\u00e9rez autre chose qu&rsquo;une police Google ? Il existe de nombreuses fa\u00e7ons d&rsquo;obtenir des polices open source sous licence appropri\u00e9e pour vos projets. Nous nous sommes tourn\u00e9s vers GitHub pour obtenir <a href=\"https:\/\/github.com\/adobe-fonts\/source-sans\/blob\/release\/VF\/SourceSans3VF-Upright.otf\">SourceSans3VF-Upright<\/a>, une police Adobe.<\/p>\n<p>Notre objectif est de l&rsquo;utiliser comme police optionnelle qui s&rsquo;affichera correctement dans l&rsquo;\u00e9diteur et le frontend.<\/p>\n<p>Le fichier de police est plac\u00e9 dans le dossier <code>\/assets\/fonts<\/code> de notre th\u00e8me enfant. \u00c0 partir de l\u00e0, nous avons cr\u00e9\u00e9 <code>functions.php<\/code>.<\/p>\n<pre><code class=\"language-php\">&lt;?php\n\/**\n * Enqueue parent and child theme styles.\n *\/\nfunction twentytwentyfive_kinstachild_enqueue_styles() {\n    \/\/ Parent theme style.\n    wp_enqueue_style(\n        'twentytwentyfive-style',\n        get_parent_theme_file_uri( 'style.css' ),\n        array(),\n        wp_get_theme()-&gt;get( 'Version' )\n    );\n\n    \/\/ Child theme style.\n    wp_enqueue_style(\n        'twentytwentyfive-child-style',\n        get_stylesheet_uri(),\n        array( 'twentytwentyfive-style' ),\n        wp_get_theme()-&gt;get( 'Version' )\n    );\n}\nadd_action( 'wp_enqueue_scripts', 'twentytwentyfive_kinstachild_enqueue_styles' );\n\n\/**\n * Enqueue child theme styles in the editor.\n *\/\nadd_action( 'after_setup_theme', function() {\n    add_editor_style( 'style.css' );\n} );<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Remarquez que dans cette configuration plus simple, nous ne mettons pas les polices personnalis\u00e9es en file d&rsquo;attente manuellement. C&rsquo;est parce que les polices variables d\u00e9finies dans <code>theme.json<\/code> sont automatiquement g\u00e9r\u00e9es par WordPress, tant qu&rsquo;elles sont correctement d\u00e9clar\u00e9es. C&rsquo;est l&rsquo;un des avantages de l&rsquo;utilisation du syst\u00e8me de blocs de th\u00e8mes.<\/p>\n<\/aside>\n\n<p>Comme dans l&rsquo;exemple pr\u00e9c\u00e9dent, notre fichier <code>theme.json<\/code> doit faire r\u00e9f\u00e9rence aux codes Manrope et Fira du parent. En les omettant, nous les supprimerions de notre th\u00e8me.<\/p>\n<pre><code class=\"language-json\">{\n  \"$schema\": \"https:\/\/schemas.wp.org\/wp\/6.7\/theme.json\",\n  \"version\": 3,\n  \"settings\": {\n    \"typography\": {\n      \"fontFamilies\": [\n        {\n          \"name\": \"Manrope\",\n          \"slug\": \"manrope\",\n          \"fontFamily\": \"Manrope, sans-serif\",\n          \"fontFace\": [\n            {\n              \"src\": [\n                \"file:..\/twentytwentyfive\/assets\/fonts\/manrope\/Manrope-VariableFont_wght.woff2\"\n              ],\n              \"fontWeight\": \"100 900\",\n              \"fontStyle\": \"normal\",\n              \"fontFamily\": \"Manrope\"\n            }\n          ]\n        },\n        {\n          \"name\": \"Fira Code\",\n          \"slug\": \"fira-code\",\n          \"fontFamily\": \"\"Fira Code\", monospace\",\n          \"fontFace\": [\n            {\n              \"src\": [\n                \"file:..\/twentytwentyfive\/assets\/fonts\/fira-code\/FiraCode-VariableFont_wght.woff2\"\n              ],\n              \"fontWeight\": \"100 900\",\n              \"fontStyle\": \"normal\",\n              \"fontFamily\": \"\"Fira Code\"\"\n            }\n          ]\n        },\n        {\n          \"name\": \"Source Sans 3\",\n          \"slug\": \"source-sans-3\",\n          \"fontFamily\": \"\"Source Sans 3\", sans-serif\",\n          \"fontFace\": [\n            {\n              \"src\": [\n                \"file:.\/assets\/fonts\/SourceSans3VF-Upright.woff2\"\n              ],\n              \"fontWeight\": \"100 900\",\n              \"fontStyle\": \"normal\",\n              \"fontFamily\": \"Source Sans 3\"\n            }\n          ]\n        }\n      ]\n    }\n  }\n}<\/code><\/pre>\n<p>N&rsquo;oubliez pas que vous avez toujours besoin d&rsquo;un fichier <code>styles.css<\/code> de base pour inclure les m\u00e9tadonn\u00e9es essentielles indiquant \u00e0 WordPress que vous travaillez avec un th\u00e8me enfant.<\/p>\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>Que vous optiez pour une configuration enti\u00e8rement personnalis\u00e9e ou pour une int\u00e9gration rapide, les polices variables de WordPress offrent un moyen puissant d&rsquo;am\u00e9liorer la typographie de votre site. Elles am\u00e9liorent les performances, r\u00e9duisent la complexit\u00e9 et vous offrent des options de conception souples et flexibles qui ne sont tout simplement pas possibles avec les polices statiques traditionnelles.<\/p>\n<p>Pour lib\u00e9rer tout leur potentiel, vous devrez peut-\u00eatre cr\u00e9er une interface utilisateur personnalis\u00e9e qui expose les axes variables (comme le poids, l&rsquo;inclinaison ou la taille optique) et donne aux propri\u00e9taires du site plus de contr\u00f4le.<\/p>\n<p>Si vous construisez un site WordPress sur la <a href=\"https:\/\/kinsta.com\/fr\/hebergement-wordpress\/\">plateforme d&rsquo;h\u00e9bergement de Kinsta<\/a>, vous b\u00e9n\u00e9ficierez \u00e9galement de leur infrastructure ax\u00e9e sur les performances, ce qui facilitera encore plus le service efficace de ressources modernes telles que les polices variables.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Depuis l&rsquo;introduction des polices web en 2009, les concepteurs de sites web ont b\u00e9n\u00e9fici\u00e9 d&rsquo;un riche ensemble de palettes typographiques. Ces polices ont \u00e9t\u00e9 largement utilis\u00e9es &#8230;<\/p>\n","protected":false},"author":313,"featured_media":81059,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1028,1038],"class_list":["post-81058","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-developpement-wordpress","topic-themes-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Utilisation de polices variables dans les th\u00e8mes WordPress<\/title>\n<meta name=\"description\" content=\"Apprenez \u00e0 utiliser des polices variables dans les th\u00e8mes WordPress avec theme.json pour am\u00e9liorer les performances et la flexibilit\u00e9 de conception.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/fr\/blog\/polices-variables\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Utiliser des polices variables dans les th\u00e8mes WordPress\" \/>\n<meta property=\"og:description\" content=\"Apprenez \u00e0 utiliser des polices variables dans les th\u00e8mes WordPress avec theme.json pour am\u00e9liorer les performances et la flexibilit\u00e9 de conception.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/polices-variables\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-09-25T07:22:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-26T11:30:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/09\/using-variable-fonts-in-wordpress-themes.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1470\" \/>\n\t<meta property=\"og:image:height\" content=\"735\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Bud Kraus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Apprenez \u00e0 utiliser des polices variables dans les th\u00e8mes WordPress avec theme.json pour am\u00e9liorer les performances et la flexibilit\u00e9 de conception.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/09\/using-variable-fonts-in-wordpress-themes.png\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Bud Kraus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/polices-variables\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/polices-variables\/\"},\"author\":{\"name\":\"Bud Kraus\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/8cce3d6bbd8a2aa46850235d997793ed\"},\"headline\":\"Utiliser des polices variables dans les th\u00e8mes WordPress\",\"datePublished\":\"2025-09-25T07:22:18+00:00\",\"dateModified\":\"2025-09-26T11:30:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/polices-variables\/\"},\"wordCount\":1849,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/polices-variables\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/09\/using-variable-fonts-in-wordpress-themes.png\",\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/polices-variables\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/polices-variables\/\",\"name\":\"Utilisation de polices variables dans les th\u00e8mes WordPress\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/polices-variables\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/polices-variables\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/09\/using-variable-fonts-in-wordpress-themes.png\",\"datePublished\":\"2025-09-25T07:22:18+00:00\",\"dateModified\":\"2025-09-26T11:30:01+00:00\",\"description\":\"Apprenez \u00e0 utiliser des polices variables dans les th\u00e8mes WordPress avec theme.json pour am\u00e9liorer les performances et la flexibilit\u00e9 de conception.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/polices-variables\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/polices-variables\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/polices-variables\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/09\/using-variable-fonts-in-wordpress-themes.png\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/09\/using-variable-fonts-in-wordpress-themes.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/polices-variables\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Th\u00e8mes WordPress\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/themes-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Utiliser des polices variables dans les th\u00e8mes WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/fr\/#website\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/8cce3d6bbd8a2aa46850235d997793ed\",\"name\":\"Bud Kraus\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4720f5a00a3f527eda2576d524728bc2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4720f5a00a3f527eda2576d524728bc2?s=96&d=mm&r=g\",\"caption\":\"Bud Kraus\"},\"description\":\"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.\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/author\/budkraus\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Utilisation de polices variables dans les th\u00e8mes WordPress","description":"Apprenez \u00e0 utiliser des polices variables dans les th\u00e8mes WordPress avec theme.json pour am\u00e9liorer les performances et la flexibilit\u00e9 de conception.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/fr\/blog\/polices-variables\/","og_locale":"fr_FR","og_type":"article","og_title":"Utiliser des polices variables dans les th\u00e8mes WordPress","og_description":"Apprenez \u00e0 utiliser des polices variables dans les th\u00e8mes WordPress avec theme.json pour am\u00e9liorer les performances et la flexibilit\u00e9 de conception.","og_url":"https:\/\/kinsta.com\/fr\/blog\/polices-variables\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2025-09-25T07:22:18+00:00","article_modified_time":"2025-09-26T11:30:01+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/09\/using-variable-fonts-in-wordpress-themes.png","type":"image\/png"}],"author":"Bud Kraus","twitter_card":"summary_large_image","twitter_description":"Apprenez \u00e0 utiliser des polices variables dans les th\u00e8mes WordPress avec theme.json pour am\u00e9liorer les performances et la flexibilit\u00e9 de conception.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/09\/using-variable-fonts-in-wordpress-themes.png","twitter_creator":"@kinsta_fr","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Bud Kraus","Dur\u00e9e de lecture estim\u00e9e":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/polices-variables\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/polices-variables\/"},"author":{"name":"Bud Kraus","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/8cce3d6bbd8a2aa46850235d997793ed"},"headline":"Utiliser des polices variables dans les th\u00e8mes WordPress","datePublished":"2025-09-25T07:22:18+00:00","dateModified":"2025-09-26T11:30:01+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/polices-variables\/"},"wordCount":1849,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/polices-variables\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/09\/using-variable-fonts-in-wordpress-themes.png","inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/polices-variables\/","url":"https:\/\/kinsta.com\/fr\/blog\/polices-variables\/","name":"Utilisation de polices variables dans les th\u00e8mes WordPress","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/polices-variables\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/polices-variables\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/09\/using-variable-fonts-in-wordpress-themes.png","datePublished":"2025-09-25T07:22:18+00:00","dateModified":"2025-09-26T11:30:01+00:00","description":"Apprenez \u00e0 utiliser des polices variables dans les th\u00e8mes WordPress avec theme.json pour am\u00e9liorer les performances et la flexibilit\u00e9 de conception.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/polices-variables\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/polices-variables\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/polices-variables\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/09\/using-variable-fonts-in-wordpress-themes.png","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/09\/using-variable-fonts-in-wordpress-themes.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/polices-variables\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Th\u00e8mes WordPress","item":"https:\/\/kinsta.com\/fr\/sujets\/themes-wordpress\/"},{"@type":"ListItem","position":3,"name":"Utiliser des polices variables dans les th\u00e8mes WordPress"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/fr\/#website","url":"https:\/\/kinsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/8cce3d6bbd8a2aa46850235d997793ed","name":"Bud Kraus","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4720f5a00a3f527eda2576d524728bc2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4720f5a00a3f527eda2576d524728bc2?s=96&d=mm&r=g","caption":"Bud Kraus"},"description":"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.","url":"https:\/\/kinsta.com\/fr\/blog\/author\/budkraus\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/81058","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/users\/313"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=81058"}],"version-history":[{"count":5,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/81058\/revisions"}],"predecessor-version":[{"id":81076,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/81058\/revisions\/81076"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/81058\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/81058\/translations\/it"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/81058\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/81058\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/81058\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/81058\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/81058\/translations\/es"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/81058\/translations\/pt"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/81058\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/81059"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=81058"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=81058"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=81058"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}