CINXE.COM
Police optimis茅e pour les titres - Nicolas Friedli
<!doctype html><html lang="fr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Police optimis茅e pour les titres - Nicolas Friedli</title> <meta name="description" content="Proposer une police particuli猫re sans pr茅t茅riter la performance de son site. Optimisation du fichier, strat茅gie de chargement et gestion du cache."> <style>:root{--sans:ui-sans-serif, Roboto, Inter, Arial, system-ui, sans-serif;--mono:ui-monospace, "Roboto Mono", "JetBrains Mono", Hack, Menlo, Consolas, monospace}html{font-family:var(--sans);font-variant-ligatures:none;font-variant-numeric:oldstyle-nums proportional-nums}code,pre{font-family:var(--mono)}code,pre,table{font-variant-numeric:lining-nums tabular-nums}a,h1,h2,h3,h4{font-variant-numeric:lining-nums proportional-nums}</style> <style media="screen">:root{color-scheme:light dark;--background:#F8F8F8;--text:#222;--contrast:orange}::marker{font-weight:700}::selection{background:var(--contrast);color:var(--text)}@media(prefers-color-scheme:dark){:root{--background:#000;--text:#DDD}::selection{color:var(--background)}}html{background:var(--background);color:var(--text);font-size:clamp(1rem,.8828rem + .3125vw,1.125rem);line-height:1.5;margin:0;padding:1rem;text-wrap:pretty}body{margin-block:0;margin-inline:auto;max-width:66ch}main{margin-block:4rem}footer,header,time{font-size:.8rem}nav{display:flex;flex-wrap:wrap;gap:1rem}h1,h2,h3,h4{line-height:1.1;margin-block:2rem 1rem;text-wrap:balance}h1{font-size:1.95em}h2{font-size:1.56rem}h3{font-size:1.25rem}h4{font-size:1rem;text-transform:uppercase}blockquote{font-style:italic;margin-left:0;padding-left:1rem;border-left:.2rem solid}blockquote em{font-style:normal}:not(pre)>code{border:1px dotted;font-size:.85rem;padding:.1em}pre{font-size:.9rem;margin-block:1rem 2rem;margin-inline:-1rem;overflow:auto;padding:.5rem 1rem}li pre{margin-inline:0}::marker,.articles a,dt{font-weight:700}dd+dt{margin-top:1rem}li{margin-top:.5rem}li li{font-size:95%}a{color:inherit;text-decoration-thickness:.2ex;text-underline-offset:.2ex}a:active,pre{background:var(--text);color:var(--background)}hr{border:.2ex solid;margin-inline-end:75%}</style> <style media="print">@page{margin:2cm}*{background-color:unset;color:#000}header,footer{display:none}pre{white-space:pre-wrap}a::after{content:" [" attr(href)"] "}</style> <link rel="icon" href="/favicon.ico" sizes="48x48"> <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="alternate" type="application/rss+xml" href="/index.xml" title="Nicolas Friedli"> <link rel="canonical" href="https://nicolasfriedli.ch/blog/police-optimisee-titres/"> <script type="application/ld+json">{"@context":"https://schema.org","@type":"BlogPosting","headline":"Police optimis茅e pour les titres","image":["/images/opengraph.jpg","/images/nicolas-friedli.jpg"],"wordCount":"649","datePublished":"2024-03-30","dateModified":"2024-10-07","author":[{"@type":"Person","name":"Nicolas Friedli","url":"https://nicolasfriedli.ch/"}],"isAccessibleForFree":true}</script> <script defer data-domain="nicolasfriedli.ch" src="https://plausible.io/js/script.outbound-links.js"></script> <link rel="webmention" href="https://webmention.io/nicolasfriedli.ch/webmention"> <link rel="pingback" href="https://webmention.io/nicolasfriedli.ch/xmlrpc"> <meta property="og:url" content="https://nicolasfriedli.ch/blog/police-optimisee-titres/"> <meta property="og:site_name" content="Nicolas Friedli"> <meta property="og:title" content="Police optimis茅e pour les titres"> <meta property="og:description" content="Proposer une police particuli猫re sans pr茅t茅riter la performance de son site. Optimisation du fichier, strat茅gie de chargement et gestion du cache."> <meta property="og:locale" content="fr"> <meta property="og:type" content="article"> <meta property="article:section" content="blog"> <meta property="article:published_time" content="2024-03-30T00:00:00+00:00"> <meta property="article:modified_time" content="2024-10-07T00:00:00+00:00"> <meta property="og:image" content="https://nicolasfriedli.ch/images/opengraph.jpg"> </head> <body> <header> <nav> <a href="/">Nicolas Friedli</a> <a href="/blog/">Blog</a> <a href="/blogroll/">Liens</a> <a href="/contact/">Contact</a> </nav> </header> <main> <h1>Police optimis茅e pour les titres</h1> <time datetime="2024-03-30" class="entry-date dateline">30聽mars聽2024</time> <time datetime="2024-10-07" class="entry-date dateline">/ derni猫re modification: 7聽octobre聽2024</time> <p>Voici la strat茅gie j鈥檃pplique sur mon site pour disposer d鈥檜ne belle police pour les titres et les intertitres sans pr茅t茅riter la performance.</p> <p>Cette solution n鈥檈st plus utilis茅e sur ce site, mais toutes les explications restent valables.</p> <h2 id="optimisation-de-la-police">Optimisation de la police</h2> <p>J鈥檃i choisi d鈥檜tiliser <a href="https://ateliertriay.github.io/bricolage/">Bricolage Grotesque</a> pour les titres (<code>h1</code>, <code>h2</code>, etc.) de mon blog. C鈥檈st une police variable, ce qui signifie qu鈥檈lle dispose de beaucoup de variantes, mais qu鈥檈lle est aussi assez lourde. Elle peut varier de taille optique, de largeur et de poids (<code>opsz</code>, <code>wdth</code> et <code>wght</code>).</p> <p>Le t茅l茅chargement du fichier de d茅part se passe dans le <a href="https://github.com/ateliertriay/bricolage/tree/main">d茅p么t GitHub</a> ou chez <a href="https://fonts.google.com/specimen/Bricolage+Grotesque">Google Fonts</a>.</p> <p>Pour 锚tre certain d鈥檃voir un fichier l茅ger, je vais convertir un fichier <code>ttf</code> en format <code>woff2</code>. Ce format est accept茅 par tous les navigateurs. Je ne souhaite pas de version variable sur mon site pour une question de poids. Comme tous mes titres sont en gras, je choisis la version statique <code>bold</code> (pour 茅viter la variation <code>wght</code>) et je prends celle en 48px (pour 茅viter la variation <code>opsz</code>). Je limite la gamme de caract猫res 脿 l鈥檃lphabet latin.</p> <p>Avec le g茅nial <a href="https://github.com/zachleat/glyphhanger">Glyphhanger</a> de l鈥檈xcellent Zach Leatherman:</p> <pre tabindex="0"><code>glyphhanger --formats=woff2 --subset=BricolageGrotesque_48pt-Bold.ttf --LATIN </code></pre><p>La taille du fichier passe de 79kB 脿 25kB. Je le renomme en <code>bricolage.woff2</code> pour la suite.</p> <p>Si le truc de Glyphanger semble trop compliqu茅, <a href="https://gwfh.mranftl.com/fonts/bricolage-grotesque?subsets=latin">Google Webfonfs Helper</a> ou le <a href="https://www.fontsquirrel.com/tools/webfont-generator">Webfont Generator de Font Squirrel</a> permettent de simplifier le travail.</p> <h2 id="affichage-par-la-feuille-de-style-css">Affichage par la feuille de style CSS</h2> <p>D茅sormais, il faut utiliser ce fichier dans les r猫gles de l鈥檃rt pour que tout se passe bien.</p> <p>Dans ma feuille de style, j鈥檃i des r猫gles de ce type (<a href="https://github.com/nfriedli/nicolasfriedli.ch/blob/main/assets/css/screen.css">feuille de style compl猫te dans GitHub</a>):</p> <pre tabindex="0"><code>:root { --font-main: ui-sans-serif, Roboto, system-ui, sans-serif; } html { font-family: var(--font-main); } </code></pre><p>J鈥檃joute ceci pour les 3 premiers niveaux de titres:</p> <pre tabindex="0"><code>:root { --font-title: BricolageGrotesque, var(--font-main); } h1, h2, h3 { font-family: var(--font-title); } </code></pre><p>Ce qui signifie que, si Bricolage Grotesque n鈥檈st pas disponible, ce sera la m锚me police que celle du texte qui sera utilis茅e. On 茅vite ainsi de mauvaises surprises.</p> <p>Et maintenant, on appelle la police que j鈥檃i plac茅e dans <code>/fonts/</code>:</p> <pre tabindex="0"><code>@font-face { font-display: swap; font-family: BricolageGrotesque; font-style: normal; font-weight: 700; src: url("/fonts/bricolage.woff2") format("woff2"); } </code></pre><p>Avec un site g茅n茅r茅 par Hugo, on placera le fichier source dans <code>/static/fonts/</code>.</p> <h2 id="strategie-de-chargement-et-de-cache">Strat茅gie de chargement et de cache</h2> <p>Si je dois 锚tre certain que le site ne soit jamais ralenti par le chargement de police, je peux choisir un affichage optionnel avec:</p> <pre tabindex="0"><code>font-display: optional; </code></pre><p>Si ma feuille de style 茅tait dans un fichier externe, je pourrais lancer le chargement avant m锚me la disponibilit茅 du CSS:</p> <pre tabindex="0"><code><link rel="preload" href="/fonts/bricolage.woff2" as="font" type="font/woff2" crossorigin> </code></pre><p>Et dans tous les cas, j鈥檃joute une r猫gle de cache dans le fichier <code>.htaccess</code>, pour tous les fichiers de type <code>woff2</code>:</p> <pre tabindex="0"><code><filesMatch ".(woff2)$"> Header set Cache-Control "max-age=63072000,immutable" </filesMatch> </code></pre><p>Ou, quand j鈥檜tilise Netlify, une r猫gle dans <code>_headers</code> appliqu茅e pour un r茅pertoire plut么t qu鈥檜n type de fichiers:</p> <pre tabindex="0"><code>/fonts/* Cache-Control: max-age=63072000,immutable </code></pre><p>Ces r猫gles de cache signifient que le fichier restera en m茅moire durant une ann茅e et ne sera pas recharg茅. Pour des informations tr猫s pr茅cises sur la gestion du cache, je conseille <a href="https://www.youtube.com/watch?v=qVQjGwm_mmw">Cache Rules Everything</a> par Harry Roberts.</p> <h2 id="ameliorer-votre-site">Am茅liorer votre site</h2> <p>La m锚me politique peut s鈥檃ppliquer pour toutes les polices de votre site. Vous pouvez entreprendre une m锚me d茅marche en vous inspirant des travaux de Zach Leatherman:</p> <ul> <li><a href="https://beyondtellerrand.com/events/dusseldorf-2019/speakers/zach-leatherman">The Scoville Scale of Web Font Loading Opinions</a></li> <li><a href="https://www.zachleat.com/web/comprehensive-webfonts/">A Comprehensive Guide to Font Loading Strategies</a></li> </ul> <p>Mais quand plusieurs polices entrent en jeu, d鈥檃utres questions se posent. Par exemple:</p> <ul> <li>quels fichiers pr茅charger (<code>preload</code>) pour ne pas faire de transferts inutiles?</li> <li>quelle police afficher de quelle mani猫re (<code>optional</code> ou <code>swap</code>)?</li> <li>quelle pertinence d鈥檜ne feuille de style externe uniquement pour les chargements de polices?</li> </ul> <p>Dans tous les cas, essayez d鈥櫭﹙iter les services tiers comme Google Fonts. Ils posent des probl猫mes de confidentialit茅, de fiabilit茅 et de performance. Et comme ils proposent un cache tr猫s court, ils gaspillent pas mal de ressources en transferts inutiles.</p> <hr> <aside> <p>Dans la m锚me th茅matique:</p> <ul> <li><a href="/blog/optimisation-raisonnable/">Philosophie d鈥檕ptimisation raisonnable</a></li> <li><a href="/blog/polices-systeme/">Utiliser des polices syst猫me</a></li> <li><a href="/blog/creation-affichage-page-web/">Cr茅ation & affichage d鈥檜ne page web</a></li> <li><a href="/blog/css-minification-cache/">Feuilles de style minifi茅es et gestion du cache</a></li> <li><a href="/blog/tester-site/">Tester un site web</a></li> </ul> </aside> </main> <footer> <p>Abonnement par <a href="/index.xml">flux RSS</a>. Contenus sous licence libre <em>Creative Commons BY-SA</em>.</p> </footer> </body> </html>