Fonts | 2024 | The Web Almanac by HTTP Archive

<!doctype html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Fonts | 2024 | The Web Almanac by HTTP Archive</title> <link rel="stylesheet" href="/static/css/normalize.css?v=3a712a3381a95c0a7b7c6ed3aa03b911"> <link rel="stylesheet" href="/static/css/almanac.css?v=222e067b0135e75f99da5f73590dcdce"> <link rel="stylesheet" href="/static/css/page.css?v=f237479c0631daba0de02c3f2222a640"> <link rel="preload" href="/static/fonts/Lato-Regular.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="/static/fonts/Poppins-Bold.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="/static/fonts/Lato-Black.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="/static/fonts/Lato-Bold.woff2" as="font" type="font/woff2" crossorigin> <script nonce="9uxeGxQp6In3_wKi7qsuROz2z_kWnCh9"> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'UA-22381566-3', { 'link_attribution': true }); gtag('config', 'G-PQ5N2MZG5M'); </script> <link rel="shortcut icon" href="/static/images/favicon.ico"> <link rel="apple-touch-icon" href="/static/images/apple-touch-icon.png"> <meta name="description" content="Fonts chapter of the 2024 Web Almanac covering where fonts are loaded from, font formats, font loading performance, variable fonts, and color fonts."> <meta property="og:title" content="Fonts | 2024 | The Web Almanac by HTTP Archive"> <meta property="og:url" content="https://almanac.httparchive.org/en/2024/fonts"> <meta property="og:image" content="https://almanac.httparchive.org/static/images/2019/fonts/hero_lg.jpg"> <meta property="og:image:height" content="433"> <meta property="og:image:width" content="866"> <meta property="og:type" content="article"> <meta property="og:description" content="Fonts chapter of the 2024 Web Almanac covering where fonts are loaded from, font formats, font loading performance, variable fonts, and color fonts."> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@HTTPArchive"> <meta name="twitter:title" content="Fonts | 2024 | The Web Almanac by HTTP Archive"> <meta name="twitter:image" content="https://almanac.httparchive.org/static/images/2019/fonts/hero_lg.jpg"> <meta name="twitter:image:alt" content="Chapter image for the Fonts chapter of the 2024 Web Almanac"> <meta name="twitter:description" content="Fonts chapter of the 2024 Web Almanac covering where fonts are loaded from, font formats, font loading performance, variable fonts, and color fonts."> <link rel="webmention" href="https://webmention.io/almanac.httparchive.org/webmention"> <link rel="pingback" href="https://webmention.io/almanac.httparchive.org/xmlrpc"> <link rel="me" href="mailto:team@httparchive.org"> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Article", "mainEntityOfPage": { "@type": "WebPage", "@id": "https://almanac.httparchive.org/en/2024/fonts" }, "headline": "Fonts | 2024 | The Web Almanac by HTTP Archive", "image": { "@type": "ImageObject", "url": "https://almanac.httparchive.org/static/images/2019/fonts/hero_lg.jpg", "height": 433, "width": 866 }, "publisher": { "@type": "Organization", "name": "HTTP Archive", "logo": { "@type": "ImageObject", "url": "https://almanac.httparchive.org/static/images/ha.png", "height": 160, "width": 320 }, "sameAs": [ "https://httparchive.org", "https://x.com/HTTPArchive", "https://bsky.app/profile/httparchive.org", "https://github.com/HTTPArchive" ] }, "author": [{ "@type": "Person", "sameAs": [ "https://almanac.httparchive.org/en/2024/contributors#bramstein" ,"https://github.com/bramstein" ,"https://www.linkedin.com/in/bramstein/" ], "name": "Bram Stein" },{ "@type": "Person", "sameAs": [ "https://almanac.httparchive.org/en/2024/contributors#charlesberret" ,"https://github.com/cberret" ], "name": "Charles Berret" }] , "description": "Fonts chapter of the 2024 Web Almanac covering where fonts are loaded from, font formats, font loading performance, variable fonts, and color fonts.", "datePublished": "2024-11-11T00:00:00.000Z", "dateModified": "2025-01-02T00:00:00.000Z" } </script> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "en", "item": "https://almanac.httparchive.org/en/" },{ "@type": "ListItem", "position": 2, "name": "2024", "item": "https://almanac.httparchive.org/en/2024" }] } </script> <meta name="citation_title" content="The 2024 Web Almanac: Fonts"> <meta name="citation_author" content="Bram Stein"> <meta name="citation_author" content="Charles Berret"> <meta name="citation_publication_date" content="2024/11/11"> <meta name="citation_journal_title" content="The 2024 Web Almanac"> <meta name="citation_volume" content="6"> <meta name="citation_issue" content="4"> <meta name="citation_publisher" content="HTTP Archive"> <meta name="citation_technical_report_institution" content="HTTP Archive"> <meta name="citation_language" content="English"> <meta name="citation_fulltext_html_url" content="https://almanac.httparchive.org/en/2024/fonts"> <link rel="canonical" href="https://almanac.httparchive.org/en/2024/fonts"> <link rel="alternate" type="application/rss+xml" title="Web Almanac by HTTP Archive RSS (en)" href="/en/rss.xml"> </head> <body class="year-2024"> <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" display="none">  <symbol id="ha-logo" viewBox="0 0 432 225"> <path d="M10.626 7.433h14.5v47.5c6-7.4 13.5-11 22.5-11 4.9 0 9.2 1.2 13.1 3.7 3.9 2.4 6.7 5.8 8.6 10.1 1.9 4.3 2.9 10.7 2.9 19.1v41.6h-14.6v-45.2c0-5.3-1.3-9.6-4-12.9-2.6-3.3-6-4.9-10.3-4.9-3.2 0-6.2.8-9 2.5-2.8 1.6-5.9 4.4-9.3 8.2v52.4h-14.4V7.433m66.4 49.5l27.2-26.7v15.1h23.1v13h-23.1v35.8c0 8.4 3.5 12.6 10.4 12.6 5.2 0 10.7-1.7 16.4-5.2v13.5c-5.6 3.1-11.6 4.7-18.2 4.7s-12.1-1.9-16.5-5.8c-1.4-1.2-2.5-2.5-3.4-3.9-.9-1.5-1.7-3.4-2.3-5.7-.6-2.4-.9-6.9-.9-13.5v-32.5h-12.7v-1.4m54.3 0l27.2-26.7v15.1h23.1v13h-23.1v35.8c0 8.4 3.5 12.6 10.4 12.6 5.2 0 10.7-1.7 16.4-5.2v13.5c-5.6 3.1-11.6 4.7-18.2 4.7s-12.1-1.9-16.5-5.8c-1.4-1.2-2.5-2.5-3.4-3.9-.9-1.5-1.7-3.4-2.3-5.7-.6-2.4-.9-6.9-.9-13.5v-32.5h-12.7v-1.4M212.8 30.1l-27.2 26.7v1.4h39c6.1.2 10.6 1.5 13.9 3.1 3.5 1.6 6.3 4.3 8.3 7.9 2.1 3.7 3.1 7.9 3.1 12.7 0 7.4-2.2 13.5-6.5 18.2-4.3 4.7-9.8 7.1-16.6 7.1-2.8 0-5.5-.4-8.2-1.1v12.3c3.4.9 6.7 1.3 9.7 1.3 10.5 0 19.2-3.5 26-10.6 6.8-7 10.2-16 10.3-27 0-11.6-3.6-20.6-10.9-27.1-7.1-6.4-17.1-9.6-29.8-9.7h-.4l-10.6-.1V30.1z" fill="currentColor" /> <path d="M198 63.7c0 52.2-.1 108.8-.1 154.7h14.8v-52.5c3.4-3.8 6.1-6.4 8.9-8 2.8-1.6 5.8-2.4 9-2.4 4.3 0 7.7 1.6 10.3 4.9 2.6 3.2 4 7.5 4 12.9v45.2h14.5v-41.6c0-8.5-.9-14.9-2.8-19.2-1.9-4.3-4.7-7.7-8.6-10.1-3.9-2.4-8.3-3.7-13.1-3.7-8.8 0-16.1 3.5-22.1 10.6v-53.1c.1-12.5 0-25.1 0-37.7H198zM55.9 174.5v31.1c0 2.5.8 3.7 2.5 3.7s4.5-1.3 8.2-3.9v8.8c-3.3 2.1-5.9 3.5-7.9 4.3-2 .8-4 1.2-6.2 1.2-6.2 0-9.9-2.4-11-7.3-6.1 4.8-12.7 7.2-19.6 7.2-5.1 0-9.3-1.7-12.7-5-3.4-3.4-5.1-7.6-5.1-12.7 0-4.6 1.6-8.7 4.9-12.3 3.3-3.7 8.1-6.5 14.1-8.7l18.5-6.4v-3.9c0-8.8-4.4-13.2-13.2-13.2-7.9 0-15.6 4.1-23 12.2v-15.8c5.6-6.6 13.7-9.9 24.2-9.9 7.9 0 14.2 2.1 19 6.2 1.6 1.3 3 3.1 4.3 5.3 1.3 2.2 2.1 4.4 2.4 6.6.4 2.2.6 6.3.6 12.5m-14.2 29.4v-21.7L32 186c-4.9 2-8.4 3.9-10.5 6-2 2-3 4.4-3 7.4s1 5.5 2.9 7.4c2 1.9 4.5 2.9 7.5 2.9 4.6-.1 8.8-2 12.8-5.8M90 145.3v16.8l.8-1.3c7-11.3 14-16.9 21-16.9 5.5 0 11.1 2.8 17.1 8.3l-7.6 12.7c-5-4.8-9.7-7.2-14-7.2-4.7 0-8.7 2.2-12.2 6.7-3.4 4.4-5.1 9.7-5.1 15.8v38.2H75.5v-73.1H90m96.9 56v14.3c-7.3 2.7-14.4 4.1-21.3 4.1-11.4 0-20.6-3.4-27.4-10.2-6.8-6.8-10.2-15.9-10.2-27.3 0-11.5 3.3-20.8 9.9-27.8 6.6-7 15.3-10.6 26.1-10.6 3.8 0 7.1.4 10.1 1.1 3 .7 6.7 2 11.1 4v15.4c-7.3-4.7-14.1-7-20.3-7-6.5 0-11.9 2.3-16 6.9-4.2 4.6-6.3 10.4-6.3 17.5 0 7.5 2.3 13.4 6.8 17.8 4.6 4.4 10.7 6.6 18.4 6.6 5.5.1 11.9-1.5 19.1-4.8m93.2-86.7c2.4 0 4.4.8 6.1 2.5 1.7 1.6 2.5 3.7 2.5 6s-.8 4.3-2.5 6c-1.7 1.7-3.7 2.5-6.1 2.5-2.2 0-4.2-.8-5.9-2.5-1.7-1.7-2.5-3.8-2.5-6s.8-4.2 2.5-5.9c1.7-1.8 3.7-2.6 5.9-2.6m-7.2 30.7h14.5v73.1h-14.5v-73.1m75 0h15.7l-32.3 74.4h-4.8l-33.1-74.4h15.8l19.7 45 19-45m78.8 37.8h-51.4c.4 7 2.7 12.6 7 16.7s9.9 6.2 16.8 6.2c9.5 0 18.3-3 26.4-8.9v14.1c-4.4 3-8.9 5.1-13.3 6.4-4.3 1.3-9.5 1.9-15.3 1.9-8.1 0-14.6-1.7-19.5-5-5-3.3-9-7.8-12-13.4-3-5.7-4.4-12.2-4.4-19.6 0-11.1 3.2-20.2 9.5-27.1 6.3-7 14.5-10.5 24.6-10.5 9.7 0 17.4 3.4 23.2 10.2 5.8 6.8 8.7 15.9 8.7 27.3v1.7m-51.4-8.6h36.8c-.4-5.8-2.1-10.2-5.2-13.3-3.1-3.1-7.2-4.7-12.4-4.7s-9.5 1.6-12.8 4.7c-3.2 3-5.4 7.5-6.4 13.3" fill="currentColor" /> </symbol>  <symbol id="github-logo" viewBox="0 0 32.6 31.8"> <path d="M16.3 0C7.3 0 0 7.3 0 16.3c0 7.2 4.7 13.3 11.1 15.5.8.1 1.1-.4 1.1-.8v-2.8c-4.5 1-5.5-2.2-5.5-2.2-.7-1.9-1.8-2.4-1.8-2.4-1.5-1 .1-1 .1-1 1.6.1 2.5 1.7 2.5 1.7 1.5 2.5 3.8 1.8 4.7 1.4.1-1.1.6-1.8 1-2.2-3.6-.4-7.4-1.8-7.4-8.1 0-1.8.6-3.2 1.7-4.4-.1-.3-.7-2 .2-4.2 0 0 1.4-.4 4.5 1.7 1.3-.4 2.7-.5 4.1-.5 1.4 0 2.8.2 4.1.5 3.1-2.1 4.5-1.7 4.5-1.7.9 2.2.3 3.9.2 4.3 1 1.1 1.7 2.6 1.7 4.4 0 6.3-3.8 7.6-7.4 8 .6.5 1.1 1.5 1.1 3V31c0 .4.3.9 1.1.8 6.5-2.2 11.1-8.3 11.1-15.5C32.6 7.3 25.3 0 16.3 0z" fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" /> </symbol>  <symbol id="twitter-logo" viewBox="0 0 300 271"> <path xmlns="http://www.w3.org/2000/svg" d="m236 0h46l-101 115 118 156h-92.6l-72.5-94.8-83 94.8h-46l107-123-113-148h94.9l65.5 86.6zm-16.1 244h25.5l-165-218h-27.4z" fill="currentColor" /> </symbol>  <symbol id="linkedin-logo" viewBox="0 0 200 200"> <path d="M185.2 0H14.8C6.6 0 0 6.4 0 14.3v171.3c0 7.9 6.6 14.3 14.8 14.3h170.4c8.1 0 14.8-6.4 14.8-14.3V14.3C199.9 6.4 193.3 0 185.2 0zM60.6 167.3H30.4V77.1h30.2v90.2zM45.5 64.8h-.2c-10.1 0-16.7-6.9-16.7-15.6 0-8.8 6.7-15.6 17.1-15.6 10.3 0 16.7 6.7 16.9 15.6 0 8.6-6.5 15.6-17.1 15.6zm124 102.5h-30.2V119c0-12.1-4.4-20.4-15.3-20.4-8.4 0-13.3 5.6-15.5 11-.8 1.9-1 4.6-1 7.3v50.4H77.3s.4-81.8 0-90.3h30.2v12.8c4-6.1 11.2-14.9 27.2-14.9 19.9 0 34.8 12.9 34.8 40.6v51.8zm-62.2-77.1c0-.1.1-.2.2-.3v.3h-.2z" fill="currentColor" /> </symbol>  <symbol id="mastodon-logo" viewBox="0 0 61 65"> <path d="M60.7539 14.3904C59.8143 7.40642 53.7273 1.90257 46.5117 0.836066C45.2943 0.655854 40.6819 0 29.9973 0H29.9175C19.2299 0 16.937 0.655854 15.7196 0.836066C8.70488 1.87302 2.29885 6.81852 0.744617 13.8852C-0.00294988 17.3654 -0.0827298 21.2237 0.0561464 24.7629C0.254119 29.8384 0.292531 34.905 0.753482 39.9598C1.07215 43.3175 1.62806 46.6484 2.41704 49.9276C3.89445 55.9839 9.87499 61.0239 15.7344 63.0801C22.0077 65.2244 28.7542 65.5804 35.2184 64.1082C35.9295 63.9428 36.6318 63.7508 37.3252 63.5321C38.8971 63.0329 40.738 62.4745 42.0913 61.4937C42.1099 61.4799 42.1251 61.4621 42.1358 61.4417C42.1466 61.4212 42.1526 61.3986 42.1534 61.3755V56.4773C42.153 56.4557 42.1479 56.4345 42.1383 56.4151C42.1287 56.3958 42.1149 56.3788 42.0979 56.3655C42.0809 56.3522 42.0611 56.3429 42.04 56.3382C42.019 56.3335 41.9971 56.3336 41.9761 56.3384C37.8345 57.3276 33.5905 57.8234 29.3324 57.8156C22.0045 57.8156 20.0336 54.3384 19.4693 52.8908C19.0156 51.6397 18.7275 50.3346 18.6124 49.0088C18.6112 48.9866 18.6153 48.9643 18.6243 48.9439C18.6333 48.9236 18.647 48.9056 18.6643 48.8915C18.6816 48.8774 18.7019 48.8675 18.7237 48.8628C18.7455 48.858 18.7681 48.8585 18.7897 48.8641C22.8622 49.8465 27.037 50.3423 31.2265 50.3412C32.234 50.3412 33.2387 50.3412 34.2463 50.3146C38.4598 50.1964 42.9009 49.9808 47.0465 49.1713C47.1499 49.1506 47.2534 49.1329 47.342 49.1063C53.881 47.8507 60.1038 43.9097 60.7362 33.9301C60.7598 33.5372 60.8189 29.8148 60.8189 29.4071C60.8218 28.0215 61.2651 19.5781 60.7539 14.3904Z" fill="currentColor"/> <path d="M50.3943 22.237V39.5876H43.5185V22.7481C43.5185 19.2029 42.0411 17.3949 39.036 17.3949C35.7325 17.3949 34.0778 19.5338 34.0778 23.7585V32.9759H27.2434V23.7585C27.2434 19.5338 25.5857 17.3949 22.2822 17.3949C19.2949 17.3949 17.8027 19.2029 17.8027 22.7481V39.5876H10.9298V22.237C10.9298 18.6918 11.835 15.8754 13.6453 13.7877C15.5128 11.7049 17.9623 10.6355 21.0028 10.6355C24.522 10.6355 27.1813 11.9885 28.9542 14.6917L30.665 17.5633L32.3788 14.6917C34.1517 11.9885 36.811 10.6355 40.3243 10.6355C43.3619 10.6355 45.8114 11.7049 47.6847 13.7877C49.4931 15.8734 50.3963 18.6899 50.3943 22.237Z" fill="white"/> </symbol>  <symbol id="bluesky-logo" viewBox="0 0 600 530"> <path d="m135.72 44.03c66.496 49.921 138.02 151.14 164.28 205.46 26.262-54.316 97.782-155.54 164.28-205.46 47.98-36.021 125.72-63.892 125.72 24.795 0 17.712-10.155 148.79-16.111 170.07-20.703 73.984-96.144 92.854-163.25 81.433 117.3 19.964 147.14 86.092 82.697 152.22-122.39 125.59-175.91-31.511-189.63-71.766-2.514-7.3797-3.6904-10.832-3.7077-7.8964-0.0174-2.9357-1.1937 0.51669-3.7077 7.8964-13.714 40.255-67.233 197.36-189.63 71.766-64.444-66.128-34.605-132.26 82.697-152.22-67.108 11.421-142.55-7.4491-163.25-81.433-5.9562-21.282-16.111-152.36-16.111-170.07 0-88.687 77.742-60.816 125.72-24.795z" fill="currentColor"/> </symbol>  <symbol id="globe-logo" viewBox="0 0 30 30"> <circle cx="14.5" cy="14.5" r="13.5" stroke-width="2" stroke-miterlimit="10" fill="none" stroke="currentColor" /> <ellipse cx="14.5" cy="14.5" rx="6.1" ry="13.5" stroke-width="2" stroke-miterlimit="10" fill="none" stroke="currentColor" /> <path d="M1.6 9.6h25.8M1.6 19.4h25.8" stroke-width="2" stroke-miterlimit="10" fill="none" stroke="currentColor" /> </symbol>  <symbol id="bar-chart-logo" viewBox="0 0 18 19"> <path d="M0 9h3v10H0V9zm5-9h3v19H5V0zm5 7h3v12h-3V7zm5-4h3v16h-3V3z" fill="currentColor" /> </symbol>  <symbol id="comment-logo" viewBox="0 0 22 22.1"> <path d="M4.4 22.1l8-5.1H22V0H0v17h4.4z" fill="currentColor" /> </symbol>  <symbol id="sql-logo" viewBox="0 0 32 14.6"> <path d="M.1 12.4V9.6c.5.4 1.1.8 1.7 1 .6.2 1.2.3 1.8.3.4 0 .7 0 .9-.1s.5-.2.7-.3c.2-.1.3-.2.4-.4.1-.2.1-.3.1-.5s-.1-.5-.2-.7c-.2-.2-.4-.4-.6-.5-.3-.2-.5-.4-.9-.5-.3-.2-.7-.3-1.1-.5-1-.4-1.7-.9-2.2-1.5S0 4.6 0 3.8c0-.7.1-1.2.4-1.7S1 1.2 1.5.9s1-.5 1.6-.7S4.3 0 5 0s1.2 0 1.8.1 1 .2 1.4.4v2.6c-.3-.1-.5-.3-.8-.4s-.5-.2-.7-.2c-.3-.1-.6-.2-.8-.2-.3 0-.5-.1-.7-.1-.3 0-.6 0-.9.1s-.5.2-.7.3c-.2.1-.4.2-.5.4-.1.2-.1.3-.1.5s.1.4.2.6c.1.2.3.3.5.5.1.1.4.3.7.4.3.1.6.3 1 .4.5.2 1 .4 1.4.7.4.2.7.5 1 .8s.5.6.7 1c.2.4.2.8.2 1.3 0 .7-.1 1.3-.4 1.8-.3.6-.7 1-1.1 1.3-.5.3-1 .5-1.6.6s-1.3.2-1.9.2c-.7 0-1.4-.1-2-.2-.6-.1-1.2-.3-1.6-.5zm16 .7c-1.8 0-3.3-.6-4.4-1.8-1.2-1.2-1.7-2.7-1.7-4.6 0-2 .6-3.6 1.7-4.9C12.9.6 14.4 0 16.3 0c1.8 0 3.3.6 4.4 1.8 1.1 1.2 1.7 2.7 1.7 4.7s-.6 3.6-1.7 4.8l-.1.1-.1.1 3.2 3.1h-4L18 12.9c-.6.1-1.2.2-1.9.2zm.1-10.6c-1 0-1.8.4-2.4 1.1-.6.7-.9 1.7-.9 3s.3 2.2.9 3c.6.7 1.4 1.1 2.3 1.1 1 0 1.8-.4 2.3-1.1.6-.7.9-1.7.9-3s-.3-2.3-.8-3.1c-.5-.7-1.3-1-2.3-1zM32 12.9h-7.5V.2h2.8v10.3H32v2.4z" fill="currentColor" /> </symbol>  <symbol id="search-logo" viewBox="0 0 13 13"> <path d="m4.8495 7.8226c0.82666 0 1.5262-0.29146 2.0985-0.87438 0.57232-0.58292 0.86378-1.2877 0.87438-2.1144 0.010599-0.82666-0.28086-1.5262-0.87438-2.0985-0.59352-0.57232-1.293-0.86378-2.0985-0.87438-0.8055-0.010599-1.5103 0.28086-2.1144 0.87438-0.60414 0.59352-0.8956 1.293-0.87438 2.0985 0.021197 0.8055 0.31266 1.5103 0.87438 2.1144 0.56172 0.60414 1.2665 0.8956 2.1144 0.87438zm4.4695 0.2115 3.681 3.6819-1.259 1.284-3.6817-3.7 0.0019784-0.69479-0.090043-0.098846c-0.87973 0.76087-1.92 1.1413-3.1207 1.1413-1.3553 0-2.5025-0.46363-3.4417-1.3909s-1.4088-2.0686-1.4088-3.4239c0-1.3553 0.4696-2.4966 1.4088-3.4239 0.9392-0.92727 2.0864-1.3969 3.4417-1.4088 1.3553-0.011889 2.4906 0.45771 3.406 1.4088 0.9154 0.95107 1.379 2.0924 1.3909 3.4239 0 1.2126-0.38043 2.2588-1.1413 3.1385l0.098834 0.090049z" fill="currentColor" /> </symbol>  <symbol id="share-apple-logo" viewBox="0 0 24 24"> <path d="M0 0h24v24H0V0z" fill="none" /> <path d="M16 5l-1.42 1.42-1.59-1.59V16h-1.98V4.83L9.42 6.42 8 5l4-4 4 4zm4 5v11c0 1.1-.9 2-2 2H6c-1.11 0-2-.9-2-2V10c0-1.11.89-2 2-2h3v2H6v11h12V10h-3V8h3c1.1 0 2 .89 2 2z" /> </symbol>  <symbol id="share-android-logo" viewBox="0 0 24 24"> <path d="M0 0h24v24H0z" fill="none" /> <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z" /> </symbol> </svg> <div id="skiptocontent"><a href="#maincontent">Skip navigation</a></div> <header id="header" class="alt-bg"> <div class="container"> <div class="top-header"> <a class="navigation-logo" href="/en/2024/"> <span class="wa">Web Almanac</span> <span class="line-group"> <span class="pre">By</span> <span class="ha">HTTP Archive</span> </span> </a> <nav id="header-page-navigation" aria-label="Page navigation"> <ul> <li><a href="/en/2024/contributors">Contributors</a></li> <li><a href="/en/2024/methodology">Methodology</a></li> <li> <a class="nav-dropdown-btn js-hide" href="/en/search">Search</a> <div class="nav-dropdown header search-nav js-enable hidden"> <button type="button" class="nav-dropdown-btn search-button" aria-expanded="false"> Search </button> <ul class="nav-dropdown-list align-right hidden header-search"> <li class="nav-dropdown-list-part"> <form action="/en/search"> <label for="header-search-box" class="visually-hidden">Search</label> <input id="header-search-box" class="search-input" type="search" name="q" placeholder="Search" title="Search" aria-label="Search"> <button class="search-button" type="submit"> <svg width="13" height="13" role="img" aria-labelledby="header-search-icon"> <title id="header-search-icon">Search</title> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#search-logo"></use> </svg> </button> </form> </li> </ul> </div> </li> <li> <a class="nav-dropdown-btn js-hide" href="/en/2024/table-of-contents">Table of Contents</a> <div class="nav-dropdown header table-of-contents js-enable hidden"> <button type="button" class="nav-dropdown-btn" aria-expanded="false" aria-label="Table of Contents" > Table of Contents </button> <ul class="nav-dropdown-list hidden header-list"> <li class="nav-dropdown-list-part"> <a href="/en/2024/">Home</a> </li> <li class="nav-dropdown-list-part"> <a href="/en/2024/table-of-contents">Table of Contents</a> </li> <li class="nav-dropdown-list-chapter foreword"> <a href="/en/2024/table-of-contents#foreword">Foreword</a> </li> <li class="nav-dropdown-list-part"> <a href="/en/2024/table-of-contents#part-1">Part I. Page Content</a> </li> <li class="nav-dropdown-list-chapter"> <span class="nav-dropdown-list-todo">Chapter 1: JavaScript</span> </li> <li class="nav-dropdown-list-chapter"> <a href="/en/2024/markup"> Chapter 2: Markup </a> </li> <li class="nav-dropdown-list-chapter"> <a href="/en/2024/structured-data"> Chapter 3: Structured Data </a> </li> <li class="nav-dropdown-list-chapter nav-dropdown-list-current"> <span> Chapter 4: Fonts </span> </li> <li class="nav-dropdown-list-chapter"> <a href="/en/2024/media"> Chapter 5: Media </a> </li> <li class="nav-dropdown-list-chapter"> <a href="/en/2024/third-parties"> Chapter 6: Third Parties </a> </li> <li class="nav-dropdown-list-part"> <a href="/en/2024/table-of-contents#part-2">Part II. User Experience</a> </li> <li class="nav-dropdown-list-chapter"> <a href="/en/2024/seo"> Chapter 7: SEO </a> </li> <li class="nav-dropdown-list-chapter"> <a href="/en/2024/accessibility"> Chapter 8: Accessibility </a> </li> <li class="nav-dropdown-list-chapter"> <a href="/en/2024/performance"> Chapter 9: Performance </a> </li> <li class="nav-dropdown-list-chapter"> <a href="/en/2024/privacy"> Chapter 10: Privacy </a> </li> <li class="nav-dropdown-list-chapter"> <a href="/en/2024/security"> Chapter 11: Security </a> </li> <li class="nav-dropdown-list-part"> <a href="/en/2024/table-of-contents#part-3">Part III. Content Publishing</a> </li> <li class="nav-dropdown-list-chapter"> <a href="/en/2024/cms"> Chapter 12: CMS </a> </li> <li class="nav-dropdown-list-chapter"> <a href="/en/2024/ecommerce"> Chapter 13: Ecommerce </a> </li> <li class="nav-dropdown-list-chapter"> <a href="/en/2024/jamstack"> Chapter 14: Jamstack </a> </li> <li class="nav-dropdown-list-chapter"> <a href="/en/2024/sustainability"> Chapter 15: Sustainability </a> </li> <li class="nav-dropdown-list-part"> <a href="/en/2024/table-of-contents#part-4">Part IV. Content Distribution</a> </li> <li class="nav-dropdown-list-chapter"> <a href="/en/2024/page-weight"> Chapter 16: Page Weight </a> </li> <li class="nav-dropdown-list-chapter"> <a href="/en/2024/cdn"> Chapter 17: CDN </a> </li> <li class="nav-dropdown-list-chapter"> <a href="/en/2024/http"> Chapter 18: HTTP </a> </li> <li class="nav-dropdown-list-chapter"> <a href="/en/2024/cookies"> Chapter 19: Cookies </a> </li> <li class="nav-dropdown-list-part"> <a href="/en/2024/table-of-contents#appendices">Appendices</a> </li> <li class="nav-dropdown-list-chapter"> <a href="/en/2024/methodology">Methodology</a> </li> <li class="nav-dropdown-list-chapter"> <a href="/en/2024/contributors">Contributors</a> </li> <li class="nav-dropdown-list-part"> <a href="/en/search">Search</a> </li> </ul> </div> </li> <li> <div class="nav-dropdown header"> <button type="button" class="nav-dropdown-btn js-enable" disabled aria-expanded="false" aria-label="Year Switcher">2024</button> <ul class="nav-dropdown-list hidden header-list"> <li> <a href="/en/2022/fonts">2022</a> </li> <li class="unsupported-year"> <a href="/en/2021/">2021 Home</a> </li> <li> <a href="/en/2020/fonts">2020</a> </li> <li> <a href="/en/2019/fonts">2019</a> </li> </ul> </div> </li> <li> <div class="nav-dropdown header"> <button type="button" class="nav-dropdown-btn js-enable" disabled aria-expanded="false" aria-label="Language Switcher" >English</button> <ul class="nav-dropdown-list hidden header-list"> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/wiki/Translators'-Guide"><em>Help translate</em></a> </li> </ul> </div> </li> </ul> </nav> <nav id="menu" aria-labelledby="menu-btn"> <a href="#footer" class="menu-btn js-hide" aria-label="Page menu"> <span class="menu-btn-bar"></span> <span class="menu-btn-bar"></span> <span class="menu-btn-bar"></span> </a> <button type="button" class="menu-btn js-enable hidden" disabled id="menu-btn" aria-label="Open the menu" aria-expanded="false" data-open-text="Open the menu" data-close-text="Close the menu"> <span class="menu-btn-bar"></span> <span class="menu-btn-bar"></span> <span class="menu-btn-bar"></span> </button> <ul class="menu"> <li><a href="/en/2024/contributors">Contributors</a></li> <li><a href="/en/2024/methodology">Methodology</a></li> <li> <form class="search-nav" action="/en/search"> <label for="mobile-search-box" class="visually-hidden">Search</label> <input id="mobile-search-box" class="search-input" type="search" name="q" placeholder="Search" title="Search" aria-label="Search"> <button class="search-button" type="submit"> <svg width="13" height="13" role="img" aria-labelledby="mobile-search-icon"> <title id="mobile-search-icon">Search</title> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#search-logo"></use> </svg> </button> </form> </li> <li> <a class="js-hide" href="/en/2024/table-of-contents">Table of Contents</a> <div class="table-of-contents-switcher js-enable hidden"> <label for="table-of-contents-switcher-mobile" class="visually-hidden"> Table of Contents Switcher </label> <select id="table-of-contents-switcher-mobile" data-label="toc-menu-mobile"> <option value="/en/2024/">Home</option> <option value="/en/2024/table-of-contents">Table of Contents</option> <option value="/en/2024/table-of-contents#foreword">Foreword</option> <option disabled> Chapter 1: JavaScript </option> <option value="/en/2024/markup"> Chapter 2: Markup </option> <option value="/en/2024/structured-data"> Chapter 3: Structured Data </option> <option disabled selected value="/en/2024/fonts"> Chapter 4: Fonts </option> <option value="/en/2024/media"> Chapter 5: Media </option> <option value="/en/2024/third-parties"> Chapter 6: Third Parties </option> <option value="/en/2024/seo"> Chapter 7: SEO </option> <option value="/en/2024/accessibility"> Chapter 8: Accessibility </option> <option value="/en/2024/performance"> Chapter 9: Performance </option> <option value="/en/2024/privacy"> Chapter 10: Privacy </option> <option value="/en/2024/security"> Chapter 11: Security </option> <option value="/en/2024/cms"> Chapter 12: CMS </option> <option value="/en/2024/ecommerce"> Chapter 13: Ecommerce </option> <option value="/en/2024/jamstack"> Chapter 14: Jamstack </option> <option value="/en/2024/sustainability"> Chapter 15: Sustainability </option> <option value="/en/2024/page-weight"> Chapter 16: Page Weight </option> <option value="/en/2024/cdn"> Chapter 17: CDN </option> <option value="/en/2024/http"> Chapter 18: HTTP </option> <option value="/en/2024/cookies"> Chapter 19: Cookies </option> <option value="/en/2024/methodology"> Methodology </option> <option value="/en/2024/contributors"> Contributors </option> <option value="/en/search"> Search </option> </select> </div> </li> <li> <div class="year-switcher js-show"> <label for="year-switcher-mobile" class="visually-hidden">Year Switcher</label> <select id="year-switcher-mobile"> <option selected="selected" value="/en/2024/fonts"> 2024 </option> <option value="/en/2022/fonts"> 2022 </option> <option value="/en/2021/"> 2021 Home </option> <option value="/en/2020/fonts"> 2020 </option> <option value="/en/2019/fonts"> 2019 </option> </select> </div> </li> <li> <div class="language-switcher js-show"> <label for="language-switcher-mobile" class="visually-hidden">Language Switcher</label> <select id="language-switcher-mobile"> <option selected="selected" lang="en" value="/en/2024/fonts"> English </option> <hr> <option value="https://github.com/HTTPArchive/almanac.httparchive.org/wiki/Translators'-Guide"> Help translate </option> </select> </div> </li> <li id="mobile-misc" class="misc"> <ul class="misc"> <li> <a href="https://httparchive.org/" aria-labelledby="ha-logo-mobile"> <svg width="70" height="35" role="img"> <title id="ha-logo-mobile">HTTP Archive home</title> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ha-logo"></use> </svg> </a> </li> <li> <ul class="social-media"> <li> <a href="https://x.com/HTTPArchive" aria-labelledby="twitter-logo-mobile"> <svg width="20" height="20" role="img"> <title id="twitter-logo-mobile">Twitter</title> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter-logo"></use> </svg> </a> </li> <li> <a href="https://bsky.app/profile/httparchive.org" aria-labelledby="bluesky-logo-mobile"> <svg width="20" height="20" role="img"> <title id="bluesky-logo-mobile">Bluesky</title> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#bluesky-logo"></use> </svg> </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org" aria-labelledby="github-logo-mobile"> <svg width="22" height="20" role="img"> <title id="github-logo-mobile">GitHub</title> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#github-logo"></use> </svg> </a> </li> </ul> </li> </ul> </li> </ul> </nav> </div> </div> </header> <script nonce="9uxeGxQp6In3_wKi7qsuROz2z_kWnCh9"> // If JS is enabled then enable menus ASAP to avoid CLS as menu items change from links to buttons (function() { document.querySelectorAll('.js-hide').forEach(element => { // Don't just hide it - delete it completely to avoid any specifity issues element.parentNode.removeChild(element); }); document.querySelectorAll('.js-enable').forEach(element => { element.classList.remove('js-enable'); element.classList.remove('hidden'); element.disabled = false; element.hidden = false; }); })(); </script> <div class="container"> <main id="chapter" class="main"> <nav aria-label="Chapter table of contents" class="index"> <div class="index-box floating-card"> <h2 class="header"> <button type="button" class="index-btn" aria-expanded="false" aria-label="Open the Table of Contents" data-close-text="Close the Table of Contents" data-open-text="Open the Table of Contents">Index</button> <span class="no-button">Index</span> </h2> <ul> <li> <a href="#introduction">Introduction</a> </li> <li> <a href="#hosting-and-services">Hosting and services</a> </li> <li> <a href="#file-formats">File formats</a> </li> <li> <a href="#file-sizes">File sizes</a> </li> <li> <a href="#outline-formats">Outline formats</a> </li> <li> <a href="#resource-hints">Resource hints</a> </li> <li> <a href="#font-display">Font display</a> </li> <li> <a href="#families-and-foundries">Families and foundries</a> </li> <li> <a href="#writing-systems">Writing systems</a> </li> <li> <a href="#opentype-features">OpenType features</a> </li> <li> <a href="#variable-fonts">Variable fonts</a> </li> <li> <a href="#color-fonts">Color fonts</a> </li> <li> <a href="#font-smoothing">Font smoothing</a> </li> <li> <a href="#generic-family-names">Generic family names</a> </li> <li> <a href="#conclusion">Conclusion</a> </li> </ul> </div> </nav> <div class="content"> <article id="maincontent" class="body"> <div class="subtitle"> Part I Chapter 4 </div> <h1 class="title title-lg"> Fonts </h1> <div class="article-dates"> <div class="article-date"> Date published: <time id="published-date" datetime="2024-11-11T00:00:00.000Z">2024/11/11</time> </div> <div class="article-date"> Last updated: <time id="modified-date" datetime="2025-01-02T00:00:00.000Z">2025/01/02</time> </div> <script nonce="9uxeGxQp6In3_wKi7qsuROz2z_kWnCh9"> // Update chapter dates to locale/language-specific format immeadiately with inline // script to avoid annoying shift as much as possible since this is in initial viewport. function formatDates(selector) { if (window.Intl && window.Intl.DateTimeFormat) { var publishedDateElement=document.querySelector(selector); if (!publishedDateElement) return; var publishedDate = new Date(publishedDateElement.getAttribute("datetime")); // Set up the date format - initially using the users default locale // This allows different locales in same language to be respected // (e.g. en-GB or en-US). var options = { day: "numeric", month: "short", year: "numeric", timeZone: "UTC" }; var dateFormat = new Intl.DateTimeFormat([], options) const usedOptions = dateFormat.resolvedOptions(); if (!usedOptions.locale.startsWith("en")) { // Reader is looking at a page in a language that is not their default locale // Set date format to page's language locale to avoid incorrect date translation. dateFormat = new Intl.DateTimeFormat("en", options) } publishedDateElement.textContent = dateFormat.format(publishedDate); } else { console.log("Could not format date"); } } formatDates("#published-date"); formatDates("#modified-date"); </script> </div>  <picture> <source media="(min-width: 866px)" type="image/avif" srcset="/static/images/2019/fonts/hero_lg.avif"> <source media="(min-width: 866px)" type="image/webp" srcset="/static/images/2019/fonts/hero_lg.webp"> <source media="(min-width: 866px)" type="image/jpeg" srcset="/static/images/2019/fonts/hero_lg.jpg"> <source type="image/avif" srcset="/static/images/2019/fonts/hero_sm.avif 1x, /static/images/2019/fonts/hero_lg.avif 2x"> <source type="image/webp" srcset="/static/images/2019/fonts/hero_sm.webp 1x, /static/images/2019/fonts/hero_lg.webp 2x"> <source type="image/jpeg" srcset="/static/images/2019/fonts/hero_sm.jpg 1x, /static/images/2019/fonts/hero_lg.jpg 2x"> <img src="/static/images/2019/fonts/hero_lg.jpg" class="content-banner" alt="Hero image of Web Almanac characters on an assembly line preparing various F letters in various styles and shapes." width="866" height="433" fetchpriority="high"> </picture> <div class="bylines"> <div class="byline">Written by <a class="author" href="/en/2024/contributors#bramstein">Bram Stein</a> and <a class="author" href="/en/2024/contributors#charlesberret">Charles Berret</a> </div> <div class="byline reviewers">Reviewed by <a class="reviewer" href="/en/2024/contributors#drott">Dominik Röttsches</a>, <a class="reviewer" href="/en/2024/contributors#svgeesus">Chris Lilley</a>, <a class="reviewer" href="/en/2024/contributors#ivanukhov">Ivan Ukhov</a>, <a class="reviewer" href="/en/2024/contributors#jmsole">José Solé</a>, <a class="reviewer" href="/en/2024/contributors#liamquin">Liam Quin</a>, <a class="reviewer" href="/en/2024/contributors#mandymichael">Mandy Michael</a>, and <a class="reviewer" href="/en/2024/contributors#raphlinus">Raph Levien</a> </div> <div class="byline analysts">Analyzed by <a class="analyst" href="/en/2024/contributors#ivanukhov">Ivan Ukhov</a> </div> <div class="byline editors">Edited by <a class="editor" href="/en/2024/contributors#charlesberret">Charles Berret</a> </div> </div> <h2 id="introduction"><a href="#introduction" class="anchor-link">Introduction</a></h2> <p>Typography plays a major role in user experience on the web, from legibility and readability to accessibility and emotional impact. And whereas web developers used to be limited to a small number of web-safe fonts, we now have vast libraries offering both expressive range and increasingly comprehensive script support for the world’s many writing systems.</p> <p>This year’s HTTP Almanac web crawl found that web font usage continues to grow, though at a slower pace than what was observed in previous years. Web fonts are now used on around 87% of all websites, whether alone or in combination with self-hosted fonts. At the same time, an increasing number of websites are now self-hosting as their exclusive means of delivering fonts. This trend coincides with a slight decline in websites using a combination of self-hosting and a font service. Still, the Google Fonts service continues to deliver the majority of fonts seen on the web. Around 57% of websites observed on the HTTP Archive’s desktop crawl and 48% on its mobile crawl use Google Fonts, whether alone or alongside another hosting option.</p> <figure id="fig-1"> <div class="figure-wrapper"> <a href="/static/images/2024/fonts/webfont-usage.png" class=""> <img src="/static/images/2024/fonts/webfont-usage.png" alt="Web font usage." aria-labelledby="fig-1-caption" aria-describedby="fig-1-description" width="600" height="371" data-width="600" data-height="371" data-seamless="" data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vTHmcrit1gMzxfZNeFp9LrA4NQSMEh140fapD4CFQ89knpy6LvEKz7VafGaFGlxCAxTdpLZXaVaq8Pg/pubchart?oid=760658561&format=interactive" loading="lazy"> </a> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/#gid=1602101968"> View data </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/performance/fonts.sql"> View query </a> </li> <li> <a href="/static/images/2024/fonts/webfont-usage.png"> View image </a> </li> </ul> </div> </div> <button type="button" class="fig-description-button novisibility-until-js" aria-expanded="false" aria-controls="fig-1-description" data-show-text="Show description of Figure 4.1" data-hide-text="Hide description of Figure 4.1">Show description of Figure 4.1</button> <div id="fig-1-description" class="hidden">Scatter chart showing the percentage of requests of web fonts over time from 2010 (0% usage) to 2024 (87% usage).</div> <figcaption id="fig-1-caption"> <a href="#fig-1" class="anchor-link">Figure 4.1.</a> Web font usage. </figcaption> </figure> <p>OpenType feature support continues to rise, following a trend seen in the past editions of the HTTP Almanac. This means an increasing share of the fonts currently used on the web have been designed with at least one OpenType feature, such as ligatures, kerning, or fractions. While this trend reflects an increasing tendency for designers to include OpenType features in the fonts themselves, this year’s data shows that more web developers are also taking advantage of these OpenType features in CSS.</p> <p>Alongside broader implementation and use of longstanding OpenType features, there has also been a significant uptake of newer OpenType capabilities, such as color and variable fonts. In the case of color fonts, adoption is still at fairly low levels (just a few thousand websites across the entire internet) but rising at a considerable rate each year. Meanwhile, variable font usage has picked up even more dramatically, and a large factor driving adoption appears to be the popularity of variable fonts for several writing systems used by large populations of web users. Chinese, Japanese, and Korean (CJK) fonts, especially in the Noto superfamily, accounted for an especially large share of the variable fonts currently in use: about 42% on desktop and 34% on mobile of all the variable fonts on the web come from Noto’s CJK families.</p> <p>More broadly, there has been a general rise in the use and support of various global scripts and languages on the web, reducing the once-overwhelming presence of Latin fonts. This displays the fruit of recent efforts to support the design and development of quality typefaces for languages that were long neglected in type catalogs, historically focused almost exclusively on Western characters.</p> <p>The remainder of this chapter explores these subjects and more in detail, using data from the HTTP Archive web crawl as a means of depicting the current state of fonts on the web. The chapter is divided into sections touching upon various subjects related to the design and use of web fonts. We start with practical decisions surrounding how fonts are delivered to users, including the hosting, format, and size of font files. We then examine the most popular font families, the foundries that designed these fonts, and their level of support for different writing systems. We close by discussing emerging technologies, such as color and variable fonts, as well as technical choices concerning how fonts are built and used on the web.</p> <p>Before proceeding into the chapter, however, we would like to make a few technical notes. Our overall approach to analyzing this year’s font data is heavily focused on trends. To examine these trends, we compare this year’s data to previous editions of the HTTP Almanac. Because there was no Almanac published in 2023, many of our comparisons point to data from the <a href="../2022/fonts">2022 edition</a>. In several cases, we also include 2023 data when it’s available and relevant.</p> <p>When we present percentages throughout the chapter, it is important to pay close attention to <em>what</em> is actually counted in each specific case and <em>how</em> the corresponding count is normalized to arrive at the percentage in question. Without keeping this in mind, it would be easy to erroneously compare apples with oranges when considering any two percentages. We use three counting methods:</p> <ul> <li><strong>Web Pages:</strong> This method follows the <a href="./methodology">Web Almanac’s methodology</a> and counts the number of root pages.</li> <li><strong>Font Requests:</strong> This method counts font requests on root pages, then divides by the total number of font requests in the crawl. If a certain font happens to be requested several times by the browser when loading a page, it will be counted equally many times.</li> <li><strong>Font Files:</strong> This method counts the number of distinct font URLs, then divides by the total number of font URLs in the crawl. If the same URL happens to be used on multiple websites, it will be counted only once. This mode of counting aims to observe the total set of font files accessible online.</li> </ul> <h2 id="hosting-and-services"><a href="#hosting-and-services" class="anchor-link">Hosting and services</a></h2> <p>There are basically just two methods for delivering fonts to website visitors. One way is to provide web fonts through a service, whether a free one like <a hreflang="en" href="https://fonts.google.com/">Google Fonts</a> or a paid one like <a hreflang="en" href="https://fonts.adobe.com/">Adobe Fonts</a>. The other way is to self-host the font files from the website’s own domain, keeping full control over the files with no external dependencies.</p> <p>To understand the font hosting choices made by web developers, we follow the method from past Almanacs and look at several overlapping categories. The “Self-hosted (non-exclusive)” category points to all websites using self-hosted fonts, even if they also use a hosting service. The “Self-hosted (exclusive)” category counts websites that only use self-hosted fonts. Likewise, the “Services (non-exclusive)” category points to all websites that use a hosting service, even if they also use a self-hosted font. Sites in the “Services (exclusive)” category use only a hosting service. We have also added a new category this year, “Self-hosted plus service,” referring to sites that use both self-hosted fonts and a service (e.g. the non-exclusive self-hosted sites minus exclusive self-hosted sites).</p> <figure id="fig-2"> <div class="figure-wrapper"> <a href="/static/images/2024/fonts/hosting-type.png" class=""> <img src="/static/images/2024/fonts/hosting-type.png" alt="Hosting Type." aria-labelledby="fig-2-caption" aria-describedby="fig-2-description" width="600" height="371" data-width="600" data-height="371" data-seamless="" data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vTHmcrit1gMzxfZNeFp9LrA4NQSMEh140fapD4CFQ89knpy6LvEKz7VafGaFGlxCAxTdpLZXaVaq8Pg/pubchart?oid=835212931&format=interactive" loading="lazy"> </a> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/#gid=1014103088"> View data </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/performance/fonts_services.sql"> View query </a> </li> <li> <a href="/static/images/2024/fonts/hosting-type.png"> View image </a> </li> </ul> </div> </div> <button type="button" class="fig-description-button novisibility-until-js" aria-expanded="false" aria-controls="fig-2-description" data-show-text="Show description of Figure 4.2" data-hide-text="Hide description of Figure 4.2">Show description of Figure 4.2</button> <div id="fig-2-description" class="hidden">Column chart showing the percentage of pages making requests to hosts in 2024. Non-exclusive self-hosting is at 70% of pages for both mobile and desktop. Exclusive self-hosting is at 28% for desktop and 34% for mobile. Self-hosting with a service is at 43% for desktop and 36% for mobile. Non-exclusive service usage is at 60% for desktop and 51% for mobile. Pages using services exclusively is at 19% for desktop and 16% for mobile.</div> <figcaption id="fig-2-caption"> <a href="#fig-2" class="anchor-link">Figure 4.2.</a> Hosting Type. </figcaption> </figure> <p>This year, there has been a significant increase in exclusive self-hosting (desktop: from 22% in 2022 to 28%; mobile: from 28% in 2022 to 34%). At the same time, there has been a coinciding decrease in non-exclusive use of services (desktop: from 63% in 2022 to 60%; mobile: from 55% in 2022 to 51%). These interconnected trends were first spotted in 2022, when more people began to self-host their fonts because it often yields better performance and privacy (since the introduction of <a href="https://developer.chrome.com/blog/http-cache-partitioning">cache partitioning</a>, using a shared font CDN is no longer beneficial). This suggests <em>a sizable number of websites that once used both a web service and their own self-hosted fonts are now using self-hosted fonts alone</em>.</p> <p>Meanwhile, the number of websites exclusively using a web font service has actually remained fairly consistent over the last two years, amounting to roughly 19% of desktop and 16% of mobile websites. A full 70% of websites now use some form of self-hosted font, whether alone or with a service. This means the overall share of websites with self-hosted fonts has risen about two percentage points since 2022.</p> <figure id="fig-3"> <div class="figure-wrapper"> <a href="/static/images/2024/fonts/web-font-usage-by-service.png" class=""> <img src="/static/images/2024/fonts/web-font-usage-by-service.png" alt="Web font usage by service." aria-labelledby="fig-3-caption" aria-describedby="fig-3-description" width="600" height="371" data-width="600" data-height="371" data-seamless="" data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vTHmcrit1gMzxfZNeFp9LrA4NQSMEh140fapD4CFQ89knpy6LvEKz7VafGaFGlxCAxTdpLZXaVaq8Pg/pubchart?oid=1521777598&format=interactive" loading="lazy"> </a> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/#gid=1669287131"> View data </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/performance/fonts_service.sql"> View query </a> </li> <li> <a href="/static/images/2024/fonts/web-font-usage-by-service.png"> View image </a> </li> </ul> </div> </div> <button type="button" class="fig-description-button novisibility-until-js" aria-expanded="false" aria-controls="fig-3-description" data-show-text="Show description of Figure 4.3" data-hide-text="Hide description of Figure 4.3">Show description of Figure 4.3</button> <div id="fig-3-description" class="hidden">Column chart showing the percentage of requests to web font services over time. Google Fonts usage dropped from 60% in 2022 to 57% in 2024. Adobe Fonts usage increased from 3.7% in 2022 to 4.1% in 2024. Font Awesome usage decreased from 4.4% in 2022 to 4% in 2024.</div> <figcaption id="fig-3-caption"> <a href="#fig-3" class="anchor-link">Figure 4.3.</a> Web font usage by service. </figcaption> </figure> <p>The service market for web fonts is highly consolidated, and increasingly so. The only major font services are now Google Fonts, Adobe Fonts, and Font Awesome. Fonts.com and cloud.typography dropped to very low levels of usage as of two years ago. Even Google Fonts, which is something of a giant in font hosting, registered a few points of declining usage in the 2023 crawl—dropping from 60% to 57% of total font hosting—albeit with a recovery showing now-stable usage levels. Meanwhile, fonts served by Adobe and Font Awesome were each found on about 4% of webpages this year.</p> <p>With their 4% share of the service market, Adobe Fonts presents the one case of a font service whose proportion of the web fonts market grew in this year’s data. Adobe registered an increase of 11% percentage points over the last two years. The most likely explanation is that Adobe Fonts bundles many high quality and popular commercial typefaces with its Creative Cloud subscription. As Adobe web font usage is not charged by pageviews, it can be a cheap option for high traffic websites compared to buying a more expensive web license from a distributor or foundry.</p> <p>Because a website can pull fonts from multiple sources, the popularity of different font hosting options is not a zero-sum game and the most popular options are often found in combinations on a single website.</p> <figure id="fig-4"> <div class="table-wrap"> <div class="table-wrap-container"> <table> <thead> <tr> <th>Services</th> <th>desktop</th> <th>mobile</th> </tr> </thead> <tbody> <tr> <td>Google Fonts, Self-hosted</td> <td class="numeric">39%</td> <td class="numeric">33%</td> </tr> <tr> <td>Self-hosted</td> <td class="numeric">28%</td> <td class="numeric">34%</td> </tr> <tr> <td>Google Fonts</td> <td class="numeric">13%</td> <td class="numeric">11%</td> </tr> <tr> <td>Google Fonts, Font Awesome, Self-hosted</td> <td class="numeric">2%</td> <td class="numeric">1%</td> </tr> <tr> <td>Google Fonts, Font Awesome</td> <td class="numeric">1%</td> <td class="numeric">1%</td> </tr> </tbody> </table> </div> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/#gid=1014103088"> View data </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/performance/fonts_services.sql"> View query </a> </li> </ul> </div> </div> <figcaption> <a href="#fig-4" class="anchor-link">Figure 4.4.</a> The top 5 most popular web font hosting combinations. </figcaption> </figure> <p>About 39% of desktop and mobile websites crawled by the HTTP Archive this year used both Google and self-hosted fonts, whereas 28% used only self-hosted fonts and 13% used only Google. Altogether, these two sources together provided the vast majority of fonts seen on the web: 79% of websites crawled in 2024 used either self-hosted fonts, Google web fonts, or both. Still, there was a noticeable drop in the number of websites combining Google Fonts with self-hosting. Between 2022 and 2023, the combination of Google and self-hosted fonts dropped from 41% of websites to 38%. That number has begun to rebound slightly this year, as the figure started climbing again to reach 39%.</p> <p>Overall, the trend is clear: more and more people prefer to self-host their web fonts. This is a great choice in many cases because self-hosting avoids external dependencies for something as critical to rendering as fonts are. Plus, when self-hosted fonts are well optimized, they give you the best performance (but more on that later).</p> <aside class="note">NB: The numbers presented in this section are slightly different from those in the 2022 chapter. The 2022 chapter attempted to include base64 encoded fonts embedded in CSS files for some (somewhat) popular web font service. Fortunately, encoding base64 fonts in CSS is no longer a popular method of serving fonts. For this reason the 2024 chapter switched to counting fonts served as separate files only. The spreadsheet for this year includes the recalculated figures for 2022 and 2023 as well (and they are mentioned where appropriate in this section).</aside> <h2 id="file-formats"><a href="#file-formats" class="anchor-link">File formats</a></h2> <p>Which font formats are found most often on the web? WOFF2 is by far the most popular format for web fonts, being used on 81% of desktop and 78% of mobile websites. This marks an increase of three percentage points in WOFF2 usage since 2022. It is also an encouraging trend because WOFF2 offers smaller file sizes, and thus increased loading performance, among other benefits. This format’s predecessor, WOFF, is also found on 8% of desktop and 10% of mobile websites, though these numbers represent a two percentage point drop since 2022.</p> <figure id="fig-5"> <div class="figure-wrapper"> <a href="/static/images/2024/fonts/popular-mime-types.png" class=""> <img src="/static/images/2024/fonts/popular-mime-types.png" alt="Popular web font MIME types." aria-labelledby="fig-5-caption" aria-describedby="fig-5-description" width="600" height="371" data-width="600" data-height="371" data-seamless="" data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vTHmcrit1gMzxfZNeFp9LrA4NQSMEh140fapD4CFQ89knpy6LvEKz7VafGaFGlxCAxTdpLZXaVaq8Pg/pubchart?oid=383455131&format=interactive" loading="lazy"> </a> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/#gid=627419225"> View data </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/performance/fonts_format_file.sql"> View query </a> </li> <li> <a href="/static/images/2024/fonts/popular-mime-types.png"> View image </a> </li> </ul> </div> </div> <button type="button" class="fig-description-button novisibility-until-js" aria-expanded="false" aria-controls="fig-5-description" data-show-text="Show description of Figure 4.5" data-hide-text="Hide description of Figure 4.5">Show description of Figure 4.5</button> <div id="fig-5-description" class="hidden">Column chart showing the percentage of requests for fonts by MIME type. WOFF2 sees the most usage at 81% for desktop and 78% for mobile. WOFF is at 8% for desktop and 10% for mobile. The <code>application/octet-stream</code> MIME type is used on 5% for desktop and 6% of mobile. Finally, TrueType (TTF) is used at 3% of desktop and 4% of mobile pages.</div> <figcaption id="fig-5-caption"> <a href="#fig-5" class="anchor-link">Figure 4.5.</a> Popular web font MIME types. </figcaption> </figure> <p>Altogether, WOFF and WOFF2 make up the vast majority of web fonts at nearly 90% of the combined total for desktop and mobile websites. TrueType files also accounted for a small but noteworthy share (3%–4%) of the non-WOFF web fonts found in this year’s data. It’s also worth pointing out that 5%–6% of websites are serving fonts as <code>application/octet-stream</code>, an incorrect MIME type. Looking at the data, the main “self-hosted” hosts serving incorrect mime types for fonts are two incorrectly configured CDNs: <a hreflang="en" href="https://cdnjs.com/">cdnjs</a> and <a hreflang="en" href="https://www.wix.com/">Wix</a>.</p> <p>While these are useful insights into the global state of web font formats, the global data paints a slightly-too-positive picture of trends because the market is skewed so heavily toward web services like Google Fonts, Font Awesome, and Adobe Fonts. These services have a vested interest in reducing the amount of data they serve, and because of their large footprint on the web, the decisions made by these few major players will tend to skew the overall picture. To understand decisions made by web developers, it’s much more interesting to exclude web services and look at the dataset for self-hosted fonts alone.</p> <figure id="fig-6"> <div class="figure-wrapper"> <a href="/static/images/2024/fonts/popular-mime-types-self-hosted.png" class=""> <img src="/static/images/2024/fonts/popular-mime-types-self-hosted.png" alt="Popular web font MIME types (self-hosted)." aria-labelledby="fig-6-caption" aria-describedby="fig-6-description" width="600" height="371" data-width="600" data-height="371" data-seamless="" data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vTHmcrit1gMzxfZNeFp9LrA4NQSMEh140fapD4CFQ89knpy6LvEKz7VafGaFGlxCAxTdpLZXaVaq8Pg/pubchart?oid=856670415&format=interactive" loading="lazy"> </a> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/#gid=1375293781"> View data </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/performance/fonts_format_file_by_service.sql"> View query </a> </li> <li> <a href="/static/images/2024/fonts/popular-mime-types-self-hosted.png"> View image </a> </li> </ul> </div> </div> <button type="button" class="fig-description-button novisibility-until-js" aria-expanded="false" aria-controls="fig-6-description" data-show-text="Show description of Figure 4.6" data-hide-text="Hide description of Figure 4.6">Show description of Figure 4.6</button> <div id="fig-6-description" class="hidden">Column chart showing the percentage of requests for self-hosted fonts by MIME type. WOFF2 sees the most usage at 58% for both desktop and mobile. WOFF is at 18% for desktop and 19% for mobile. The <code>application/octet-stream</code> MIME type is used on 13% for desktop and 12% of mobile. Finally, TrueType (TTF) is used at 6% for both desktop and mobile pages.</div> <figcaption id="fig-6-caption"> <a href="#fig-6" class="anchor-link">Figure 4.6.</a> Popular web font MIME types (self-hosted). </figcaption> </figure> <p>Luckily, WOFF2 also takes the lead here, but surprisingly, the older WOFF format is still very popular on websites that self-host their fonts. In general, uncompressed font formats still make up a significant portion of self-hosted fonts. Developers who are still holding out have a lot to gain by switching to WOFF2, and making the switch should be viewed as low-hanging fruit. There are many online and command line tools to convert OTF or TTF files to WOFF2. It’s also possible to decompress WOFF and recompress the files as WOFF2 (though one must be cautious that conversion is in compliance with a font’s license).</p> <h2 id="file-sizes"><a href="#file-sizes" class="anchor-link">File sizes</a></h2> <p>The average size of web fonts has risen for most websites on desktop and mobile since 2022. This general trend is especially striking in the 50th, 75th, and 90th percentiles, where the average size across desktop and mobile websites shows major increases. Delivering these larger fonts in compressed format offers a valuable means of keeping manageable load times.</p> <figure id="fig-7"> <div class="figure-wrapper"> <a href="/static/images/2024/fonts/font-sizes.png" class=""> <img src="/static/images/2024/fonts/font-sizes.png" alt="Font file sizes." aria-labelledby="fig-7-caption" aria-describedby="fig-7-description" width="600" height="371" data-width="600" data-height="371" data-seamless="" data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vTHmcrit1gMzxfZNeFp9LrA4NQSMEh140fapD4CFQ89knpy6LvEKz7VafGaFGlxCAxTdpLZXaVaq8Pg/pubchart?oid=566180989&format=interactive" loading="lazy"> </a> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/#gid=1423338282"> View data </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/performance/fonts_size.sql"> View query </a> </li> <li> <a href="/static/images/2024/fonts/font-sizes.png"> View image </a> </li> </ul> </div> </div> <button type="button" class="fig-description-button novisibility-until-js" aria-expanded="false" aria-controls="fig-7-description" data-show-text="Show description of Figure 4.7" data-hide-text="Hide description of Figure 4.7">Show description of Figure 4.7</button> <div id="fig-7-description" class="hidden">Column chart showing font file sizes. The 10th percentile 9 KB of fonts are used on desktop and 10 KB on mobile, the 25th percentile it’s 18 KB for both mobile and desktop, the 50th percentile it’s 39 KB for both mobile and desktop, the 75th percentile it’s 76 KB for both, and finally at the 90th percentile it’s 116 KB on desktop and 112 KB on mobile.</div> <figcaption id="fig-7-caption"> <a href="#fig-7" class="anchor-link">Figure 4.7.</a> Font file sizes. </figcaption> </figure> <p>By observing font formats individually, we can compare the relative impact of compression by looking at WOFF2 file sizes and plain TTF file sizes side by side. The size of a font file depends a lot on its format. The more highly compressed formats like WOFF and WOFF2 should have smaller file sizes, on average, than non-compressed font formats like plain TrueType and OpenType files (which you shouldn’t be using). The steady increase in WOFF2 usage is good news: with average font file size going up, WOFF2 can help manage the performance impact of these larger files.</p> <figure id="fig-8"> <div class="figure-wrapper"> <a href="/static/images/2024/fonts/woff2-font-sizes.png" class=""> <img src="/static/images/2024/fonts/woff2-font-sizes.png" alt="WOFF2 font file sizes." aria-labelledby="fig-8-caption" aria-describedby="fig-8-description" width="600" height="371" data-width="600" data-height="371" data-seamless="" data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vTHmcrit1gMzxfZNeFp9LrA4NQSMEh140fapD4CFQ89knpy6LvEKz7VafGaFGlxCAxTdpLZXaVaq8Pg/pubchart?oid=1516367483&format=interactive" loading="lazy"> </a> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/#gid=1704259188"> View data </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/performance/fonts_size_by_format.sql"> View query </a> </li> <li> <a href="/static/images/2024/fonts/woff2-font-sizes.png"> View image </a> </li> </ul> </div> </div> <button type="button" class="fig-description-button novisibility-until-js" aria-expanded="false" aria-controls="fig-8-description" data-show-text="Show description of Figure 4.8" data-hide-text="Hide description of Figure 4.8">Show description of Figure 4.8</button> <div id="fig-8-description" class="hidden">Column chart showing WOFF2 font file sizes. The 10th percentile 12 KB of fonts are used on desktop and mobile, the 25th percentile it’s 18 KB for desktop and mobile, the 50th percentile it’s 39 KB for desktop and 37 KB for mobile, the 75th percentile it’s 75 KB for both, and finally at the 90th percentile it’s 95 KB on desktop and mobile.</div> <figcaption id="fig-8-caption"> <a href="#fig-8" class="anchor-link">Figure 4.8.</a> WOFF2 font file sizes. </figcaption> </figure> <figure id="fig-9"> <div class="figure-wrapper"> <a href="/static/images/2024/fonts/ttf-font-sizes.png" class=""> <img src="/static/images/2024/fonts/ttf-font-sizes.png" alt="TTF font file sizes." aria-labelledby="fig-9-caption" aria-describedby="fig-9-description" width="600" height="371" data-width="600" data-height="371" data-seamless="" data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vTHmcrit1gMzxfZNeFp9LrA4NQSMEh140fapD4CFQ89knpy6LvEKz7VafGaFGlxCAxTdpLZXaVaq8Pg/pubchart?oid=548670036&format=interactive" loading="lazy"> </a> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/#gid=1704259188"> View data </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/performance/fonts_size_by_format.sql"> View query </a> </li> <li> <a href="/static/images/2024/fonts/ttf-font-sizes.png"> View image </a> </li> </ul> </div> </div> <button type="button" class="fig-description-button novisibility-until-js" aria-expanded="false" aria-controls="fig-9-description" data-show-text="Show description of Figure 4.9" data-hide-text="Hide description of Figure 4.9">Show description of Figure 4.9</button> <div id="fig-9-description" class="hidden">Column chart showing TrueType (TTF) font file sizes. The 10th percentile 7 KB of fonts are used on both desktop and mobile, the 25th percentile it’s 23 KB for desktop and 24 KB for mobile, the 50th percentile it’s 53 KB for desktop and 55 KB for mobile, the 75th percentile it’s 105 KB for desktop and 109 KB for mobile, and finally at the 90th percentile it’s 184 KB on desktop and 191 KB on mobile.</div> <figcaption id="fig-9-caption"> <a href="#fig-9" class="anchor-link">Figure 4.9.</a> TTF font file sizes. </figcaption> </figure> <p>The difference in file size for WOFF2 compared to TTF is greatest in the higher percentiles, representing the largest files of each type used on the web this year. At the 90th percentile, the TTF files used this year were roughly twice as large as WOFF2 files. Moving toward lower percentiles, this difference converges and finally reverses. At the 10th percentile, representing the smallest bracket of fonts found for each format, WOFF2 files are nearly twice the size of TTF files. This relationship in file sizes is most likely due to the overhead of the WOFF2 compression dictionary. Because your choice of font format can have such a dramatic effect on website performance, we repeat our call to action from 2022 and urge developers to use WOFF2 fonts.</p> <p>Looking at the difference between WOFF2 file sizes for self-hosted sites versus Google Fonts (we chose Google for the comparison as they are the most performance focused service), the difference is staggering. In the 50th percentile and up, self-hosted WOFF2 file sizes are on average double that of what is served by Google Fonts.</p> <figure id="fig-10"> <div class="figure-wrapper"> <a href="/static/images/2024/fonts/woff2-font-sizes-google-vs-self-hosted.png" class=""> <img src="/static/images/2024/fonts/woff2-font-sizes-google-vs-self-hosted.png" alt="WOFF2 font file sizes (Google vs. Self-hosted)." aria-labelledby="fig-10-caption" aria-describedby="fig-10-description" width="600" height="371" data-width="600" data-height="371" data-seamless="" data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vTHmcrit1gMzxfZNeFp9LrA4NQSMEh140fapD4CFQ89knpy6LvEKz7VafGaFGlxCAxTdpLZXaVaq8Pg/pubchart?oid=58104693&format=interactive" loading="lazy"> </a> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/#gid=732629879"> View data </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/performance/fonts_size_by_service.sql"> View query </a> </li> <li> <a href="/static/images/2024/fonts/woff2-font-sizes-google-vs-self-hosted.png"> View image </a> </li> </ul> </div> </div> <button type="button" class="fig-description-button novisibility-until-js" aria-expanded="false" aria-controls="fig-10-description" data-show-text="Show description of Figure 4.10" data-hide-text="Hide description of Figure 4.10">Show description of Figure 4.10</button> <div id="fig-10-description" class="hidden">Column chart comparing WOFF2 font file sizes between Google Fonts and self-hosted. In the 10th percentile Google Fonts serves 8 KB of WOFF2 fonts while self-hosted fonts are at 12 KB, in the 25th percentile it’s 11 KB for Google Fonts and 18 KB for self-hosted, in the 50th percentile it’s 16 KB for Google Fonts and 39 KB for self-hosted, in the 75th percentile it’s 26 KB for Google Fonts and 75 KB for self-hosted, and finally at the 90th percentile it’s 45 KB for Google Fonts and 95 KB self-hosted.</div> <figcaption id="fig-10-caption"> <a href="#fig-10" class="anchor-link">Figure 4.10.</a> WOFF2 font file sizes (Google vs. Self-hosted). </figcaption> </figure> <p>We can only speculate on the reasons for this discrepancy. Some of it can be explained by differences in the set of fonts used by each of these groups. But as we’ll see later, a lot of self-hosted fonts are downloaded from Google Fonts and should have similar compression rates. Another explanation could be that a lot of Google Fonts users are using the subsetting offered by Google, while the self-hosted users are serving the entire font. Whatever causes this difference, it’ll be interesting to explore in future editions of the almanac.</p> <p>Digging down even further, we can take a look at the individual table sizes used in fonts. As noted in 2022, a reasonable approach to measuring the impact of a particular OpenType table on overall file size is to multiply its median size by the number of fonts that include that table.</p> <figure id="fig-11"> <div class="table-wrap"> <div class="table-wrap-container"> <table> <thead> <tr> <th>OpenType table</th> <th>desktop</th> <th>mobile</th> </tr> </thead> <tbody> <tr> <td>glyf</td> <td class="numeric">77%</td> <td class="numeric">78%</td> </tr> <tr> <td>GPOS</td> <td class="numeric">6%</td> <td class="numeric">6%</td> </tr> <tr> <td>CFF</td> <td class="numeric">5%</td> <td class="numeric">4%</td> </tr> <tr> <td>hmtx</td> <td class="numeric">3%</td> <td class="numeric">3%</td> </tr> <tr> <td>post</td> <td class="numeric">2%</td> <td class="numeric">2%</td> </tr> <tr> <td>name</td> <td class="numeric">1%</td> <td class="numeric">1%</td> </tr> <tr> <td>cmap</td> <td class="numeric">1%</td> <td class="numeric">1%</td> </tr> <tr> <td>gvar</td> <td class="numeric">1%</td> <td class="numeric">1%</td> </tr> <tr> <td>fpgm</td> <td class="numeric">1%</td> <td class="numeric">1%</td> </tr> <tr> <td>GSUB</td> <td class="numeric">1%</td> <td class="numeric">1%</td> </tr> </tbody> </table> </div> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/#gid=1322494859"> View data </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/performance/fonts_size_by_table.sql"> View query </a> </li> </ul> </div> </div> <figcaption> <a href="#fig-11" class="anchor-link">Figure 4.11.</a> The top 10 OpenType tables measured by "impact". </figcaption> </figure> <p>Because it contains the actual glyph outlines, <code>glyf</code> remains the table with the highest impact. However, there have been some noticeable changes in the order of the tables compared to 2022. <code>GPOS</code> (Glyph Positioning, which controls the placement of glyphs) has overtaken <code>CFF</code> (Compact Font Format, which is an alternative to <code>glyf</code>). This trend is most likely due to declining usage of CFF fonts (on which more in the next section). It’s also good to see that the <code>kern</code> table has dropped out of the top 10 as it is replaced by the more modern kerning implementation in the <code>GPOS</code> table.</p> <p>The <code>post</code> and <code>name</code> tables are still in the top 10, which (as pointed out in the 2022 chapter) means the fonts have not been properly optimized. We would still love to see a tool that helps with this optimization process, as <code>post</code> and <code>name</code> mostly contain unnecessary data for web fonts (unless a web app allows users to add web fonts to its font menu).</p> <h2 id="outline-formats"><a href="#outline-formats" class="anchor-link">Outline formats</a></h2> <p>The most common outline format continues to be TrueType (<code>glyf</code>), which accounted for 92% of both desktop and mobile fonts. This number has slowly ticked upward in recent years, suggesting that the <code>glyf</code> format has a solid hold over its nearest competitor, <code>CFF</code>, which held a declining share of 8%. Compared to 2022, the slight increase in <code>glyf</code> usage (2 percentage points for desktop, 1 point for mobile) corresponds almost exactly to the drop in <code>CFF</code> outlines. Other outline formats, such as <code>SVG</code> and <code>CFF2</code>, registered a fairly minuscule presence well under 1% of web fonts (not pictured).</p> <figure id="fig-12"> <div class="figure-wrapper"> <a href="/static/images/2024/fonts/font-outline-formats.png" class=""> <img src="/static/images/2024/fonts/font-outline-formats.png" alt="Outline formats." aria-labelledby="fig-12-caption" aria-describedby="fig-12-description" width="600" height="371" data-width="600" data-height="371" data-seamless="" data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vTHmcrit1gMzxfZNeFp9LrA4NQSMEh140fapD4CFQ89knpy6LvEKz7VafGaFGlxCAxTdpLZXaVaq8Pg/pubchart?oid=21563224&format=interactive" loading="lazy"> </a> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/#gid=810083627"> View data </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/performance/fonts_size_by_table.sql"> View query </a> </li> <li> <a href="/static/images/2024/fonts/font-outline-formats.png"> View image </a> </li> </ul> </div> </div> <button type="button" class="fig-description-button novisibility-until-js" aria-expanded="false" aria-controls="fig-12-description" data-show-text="Show description of Figure 4.12" data-hide-text="Hide description of Figure 4.12">Show description of Figure 4.12</button> <div id="fig-12-description" class="hidden">Pie chart comparing font outline formats: 92.4% of fonts served use the <code>glyf</code> (TrueType) outline format, while only about 7.6% use the Compact Font Format (<code>CFF</code>).</div> <figcaption id="fig-12-caption"> <a href="#fig-12" class="anchor-link">Figure 4.12.</a> Outline formats. </figcaption> </figure> <p>There has also been a small increase in font outline sizes, consistent with general increases in the size of font files. Interestingly, this increase seems to disproportionately affect <code>CFF</code>. We think this is caused by the decrease in overall <code>CFF</code> usage combined with the fact that the most used CFF-based fonts are CJK fonts, which tend to be on the larger side.</p> <figure id="fig-13"> <div class="figure-wrapper"> <a href="/static/images/2024/fonts/font-outline-glyf-cff-comparison.png" class=""> <img src="/static/images/2024/fonts/font-outline-glyf-cff-comparison.png" alt="Font outlines sizes comparing CFF and glyf." aria-labelledby="fig-13-caption" aria-describedby="fig-13-description" width="600" height="371" data-width="600" data-height="371" data-seamless="" data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vTHmcrit1gMzxfZNeFp9LrA4NQSMEh140fapD4CFQ89knpy6LvEKz7VafGaFGlxCAxTdpLZXaVaq8Pg/pubchart?oid=2147340050&format=interactive" loading="lazy"> </a> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/#gid=1322494859"> View data </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/performance/fonts_size_by_table.sql"> View query </a> </li> <li> <a href="/static/images/2024/fonts/font-outline-glyf-cff-comparison.png"> View image </a> </li> </ul> </div> </div> <button type="button" class="fig-description-button novisibility-until-js" aria-expanded="false" aria-controls="fig-13-description" data-show-text="Show description of Figure 4.13" data-hide-text="Hide description of Figure 4.13">Show description of Figure 4.13</button> <div id="fig-13-description" class="hidden">Column chart comparing font outline format sizes. At 25th percentile <code>CFF</code> is at 16 KB and <code>glyf</code> at 21 KB, at the 50th percentile <code>CFF</code> is at 33 KB and <code>glyf</code> at 47 KB, at the 75th percentile <code>CFF</code> is at 61 KB and <code>glyf</code> at 119 KB. Finally, at the 90th percentile <code>CFF</code> is at 193 KB and <code>glyf</code> at 159 KB.</div> <figcaption id="fig-13-caption"> <a href="#fig-13" class="anchor-link">Figure 4.13.</a> Font outlines sizes comparing <code>CFF</code> and <code>glyf</code>. </figcaption> </figure> <p>As noted in 2022, it is not a good idea to take raw table size comparisons at face value. Web fonts should always be compressed, so a fairer comparison would be to look at the compressed table sizes. For this we used the same approach as in 2022, by applying the median compression rates in the <a hreflang="en" href="https://www.w3.org/TR/2016/NOTE-WOFF20ER-20160315/#brotli-adobe-cff">WOFF2 evaluation report</a>. Approximating compression paints a very clear picture: large fonts are better served using <code>glyf</code> (TrueType) outlines rather than <code>CFF</code>.</p> <figure id="fig-14"> <div class="figure-wrapper"> <a href="/static/images/2024/fonts/font-outline-glyf-cff-comparison-compressed.png" class=""> <img src="/static/images/2024/fonts/font-outline-glyf-cff-comparison-compressed.png" alt="Compressed font outlines sizes comparing CFF and glyf." aria-labelledby="fig-14-caption" aria-describedby="fig-14-description" width="600" height="371" data-width="600" data-height="371" data-seamless="" data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vTHmcrit1gMzxfZNeFp9LrA4NQSMEh140fapD4CFQ89knpy6LvEKz7VafGaFGlxCAxTdpLZXaVaq8Pg/pubchart?oid=2038548290&format=interactive" loading="lazy"> </a> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/#gid=1322494859"> View data </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/performance/fonts_size_by_table.sql"> View query </a> </li> <li> <a href="/static/images/2024/fonts/font-outline-glyf-cff-comparison-compressed.png"> View image </a> </li> </ul> </div> </div> <button type="button" class="fig-description-button novisibility-until-js" aria-expanded="false" aria-controls="fig-14-description" data-show-text="Show description of Figure 4.14" data-hide-text="Hide description of Figure 4.14">Show description of Figure 4.14</button> <div id="fig-14-description" class="hidden">Column chart comparing compressed font outline format sizes. At the 25th percentile <code>CFF</code> and <code>glyf</code> are both at 6 KB, at the 50th percentile <code>CFF</code> is at 17 KB and <code>glyf</code> at 16 KB, at the 75th percentile <code>CFF</code> is at 37 KB and <code>glyf</code> at 43 KB. Finally, at the 90th percentile <code>CFF</code> is at 133 KB and <code>glyf</code> at 65 KB.</div> <figcaption id="fig-14-caption"> <a href="#fig-14" class="anchor-link">Figure 4.14.</a> Compressed font outlines sizes comparing <code>CFF</code> and <code>glyf</code>. </figcaption> </figure> <p> There are some efforts underway to <a hreflang="en" href="https://github.com/harfbuzz/boring-expansion-spec/blob/main/glyf1-cubicOutlines.md">add cubic Bézier curves to <code>glyf</code></a >, so it will be interesting to see whether the difference in size between <code>glyf</code> and <code>CFF</code> is due to the different curve type (cubic Bézier curves have more control points), or inefficiencies in the <code>CFF</code> format. Our money is on a combination of both factors, but time will tell. </p> <h2 id="resource-hints"><a href="#resource-hints" class="anchor-link">Resource hints</a></h2> <p>To decrease page loading times, web developers can instruct browsers to load essential resources, such as web fonts, before they’re actually needed. This is done using resource hints, which guide the browser to load or render specific resources ahead of schedule. By leveraging resource hints, you can inform the browser to download and load critical fonts even if they haven’t been explicitly referenced in the code yet, thereby improving page performance. The browser can then display content faster and provide a smoother user experience.</p> <p>There are three types of resource hints relevant for web fonts, each with its own level of impact. The <code>preload</code> hint is the most impactful type of resource hint, as it directly instructs the browser to load a resource (such as a web font) before it’s actually needed. The <code>preconnect</code> hint tells the browser to establish a connection with a server, preparing it for future requests, including font loading, and this has a medium impact on performance. The <code>dns-prefetch</code> hint signals the browser to prefetch DNS information for a specific domain, but doesn’t initiate a connection nor font loading. This has a relatively low impact on performance.</p> <p>We made some changes in the data gathered on resource hints for this year’s Almanac, as we realized the 2022 analysis was capturing too much. We are now measuring two different aspects. For <code>dns-prefetch</code> and <code>preconnect</code> we are only measuring resource hint usage against known font services (the same ones used throughout the chapter). This excludes pre-connecting and DNS-prefetching to one’s own web host or CDN that self-hosts fonts, so actual usage is probably much higher. For <code>preload</code>, we are measuring when the hint has an <code>as</code> attribute with value <code>font</code>.</p> <figure id="fig-15"> <div class="figure-wrapper"> <a href="/static/images/2024/fonts/font-resource-hint-usage.png" class=""> <img src="/static/images/2024/fonts/font-resource-hint-usage.png" alt="Font resource hint usage." aria-labelledby="fig-15-caption" aria-describedby="fig-15-description" width="600" height="371" data-width="600" data-height="371" data-seamless="" data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vTHmcrit1gMzxfZNeFp9LrA4NQSMEh140fapD4CFQ89knpy6LvEKz7VafGaFGlxCAxTdpLZXaVaq8Pg/pubchart?oid=769711215&format=interactive" loading="lazy"> </a> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/#gid=405563602"> View data </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/performance/pages_link_relationship.sql"> View query </a> </li> <li> <a href="/static/images/2024/fonts/font-resource-hint-usage.png"> View image </a> </li> </ul> </div> </div> <button type="button" class="fig-description-button novisibility-until-js" aria-expanded="false" aria-controls="fig-15-description" data-show-text="Show description of Figure 4.15" data-hide-text="Hide description of Figure 4.15">Show description of Figure 4.15</button> <div id="fig-15-description" class="hidden">Column chart showing usage of resource hints for fonts. The <code>preconnect</code> hint is used at 18% of pages for both mobile and desktop. The <code>dns-prefetch</code> resource hint is used on 15% of pages for desktop and 16% of pages for mobile. The <code>preload</code> resource hint is used on 11% of pages for both desktop and mobile.</div> <figcaption id="fig-15-caption"> <a href="#fig-15" class="anchor-link">Figure 4.15.</a> Font resource hint usage. </figcaption> </figure> <p>In this year’s data, <code>preconnect</code> and <code>dns-prefetch</code> are used to speed up connecting to web font services at 18% and 16% respectively. The most effective resource hint, <code>preload</code>,is only used on 11% of pages. We’d like to see this number go up by a lot, as using the <code>preload</code> resource hint is the single most effective thing you can do to speed up your font loading! With that said, it is not always possible to use <code>preload</code>, for example if you use a service that does not provide stable font URLs. In those cases, it is best to use <code>preconnect</code> or <code>dns-prefetch</code> hints.</p> <p>Unfortunately, the usage of resource hints for fonts hasn’t changed much in the last two years either, so this is an underused (but very effective!) feature that we would love to see adopted more broadly by web developers.</p> <h2 id="font-display"><a href="#font-display" class="anchor-link">Font display</a></h2> <p>The <code>font-display</code> descriptor for the <code>@font-face</code> CSS directive allows developers to choose when and how their website renders its text depending on the time it takes to fetch its fonts. Depending on the value of the <code>font-display</code> descriptor, the browser will either wait until web fonts are downloaded or swap to a fallback font after timing out.</p> <figure id="fig-16"> <div class="figure-wrapper"> <a href="/static/images/2024/fonts/font-display-usage.png" class=""> <img src="/static/images/2024/fonts/font-display-usage.png" alt="Usage of font-display values." aria-labelledby="fig-16-caption" aria-describedby="fig-16-description" width="600" height="371" data-width="600" data-height="371" data-seamless="" data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vTHmcrit1gMzxfZNeFp9LrA4NQSMEh140fapD4CFQ89knpy6LvEKz7VafGaFGlxCAxTdpLZXaVaq8Pg/pubchart?oid=1458420916&format=interactive" loading="lazy"> </a> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/#gid=455989674"> View data </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/performance/styles_font_display.sql"> View query </a> </li> <li> <a href="/static/images/2024/fonts/font-display-usage.png"> View image </a> </li> </ul> </div> </div> <button type="button" class="fig-description-button novisibility-until-js" aria-expanded="false" aria-controls="fig-16-description" data-show-text="Show description of Figure 4.16" data-hide-text="Hide description of Figure 4.16">Show description of Figure 4.16</button> <div id="fig-16-description" class="hidden">Column chart showing usage of <code>font-display</code> values in CSS. The <code>swap</code> value is used at 44% of desktop pages and 45% of mobile pages. The <code>block</code> value is used on 23% of pages for both desktop and mobile. The <code>auto</code> value is used on 9% of pages for both desktop and mobile. The <code>fallback</code> value is used on 3% of pages for both desktop and mobile. Finally, the <code>optional</code> value is used on 0% of pages for desktop and 1% for mobile.</div> <figcaption id="fig-16-caption"> <a href="#fig-16" class="anchor-link">Figure 4.16.</a> Usage of <code>font-display</code> values. </figcaption> </figure> <p>The use of <code>swap</code> for <code>font-display</code> has grown considerably in recent years, from 11% in 2020, to 30% in 2022, to about 45% on desktop and mobile this year. This is a good sign because <code>swap</code> offers earlier text rendering. The only tradeoff is a potential layout shift when the web font loads. This is preferable for users on slower connections as they’ll see content much earlier, while users on faster connections might not even notice the layout shift (which can be further reduced using resource hints and font metrics overrides).</p> <p>Meanwhile, the bad news is that this year’s crawl also shows increasing use of <code>block</code> for <code>font-display</code>, which literally blocks text from rendering until the intended font is available or the timeout period has expired. While there are legitimate use cases for <code>block</code>, most websites should use <code>swap</code>, <code>fallback</code>, or <code>optional</code>. The rising use of <code>block</code> (24% desktop, 23% mobile) continues a trend from 2022, when it overtook <code>auto</code> as the second most common value chosen when using the <code>font-display</code> descriptor. The <code>auto</code> value itself is now used on 9% of websites, while <code>fallback</code> is used on 3%. The <code>optional</code> and <code>normal</code> values were used with <code>font-display</code> on less than 1% of websites.</p> <p>We think the rise of <code>block</code> usage is concerning so we decided to investigate a bit further. Looking at the top 10 <code>@font-face</code> rules using <code>font-display: block</code> reveals an interesting discovery: all of the top 10 fonts are icon fonts!</p> <figure id="fig-17"> <div class="table-wrap"> <div class="table-wrap-container"> <table> <thead> <tr> <th>Family</th> <th>desktop</th> <th>mobile</th> </tr> </thead> <tbody> <tr> <td>Font Awesome</td> <td class="numeric">15.5%</td> <td class="numeric">16.1%</td> </tr> <tr> <td>ETmodules</td> <td class="numeric">1.7%</td> <td class="numeric">1.7%</td> </tr> <tr> <td>TablePress</td> <td class="numeric">1.1%</td> <td class="numeric">1.1%</td> </tr> <tr> <td>icomoon</td> <td class="numeric">1.0%</td> <td class="numeric">1.1%</td> </tr> <tr> <td>vcpb-plugin-icons</td> <td class="numeric">0.8%</td> <td class="numeric">0.7%</td> </tr> <tr> <td>fl-icons</td> <td class="numeric">0.6%</td> <td class="numeric">0.6%</td> </tr> <tr> <td>dm-social-font</td> <td class="numeric">0.5%</td> <td class="numeric">0.5%</td> </tr> <tr> <td>dm-font</td> <td class="numeric">0.5%</td> <td class="numeric">0.5%</td> </tr> <tr> <td>dm-social-icons</td> <td class="numeric">0%</td> <td class="numeric">0.5%</td> </tr> <tr> <td>dm-common-icons</td> <td class="numeric">0%</td> <td class="numeric">0.5%</td> </tr> </tbody> </table> </div> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/#gid=1521726011"> View data </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/performance/styles_font_display_by_family.sql"> View query </a> </li> </ul> </div> </div> <figcaption> <a href="#fig-17" class="anchor-link">Figure 4.17.</a> The top 10 most commonly used fonts with <code>font-display: block</code>. </figcaption> </figure> <p>Font Awesome leads at a whopping 15% usage, while other icon fonts make up the remainder of the top 10. This makes sense, as icon fonts are usually encoded in the Private Use Area (or worse, override ASCII), so showing a fallback while an icon font is loading does not provide a good user experience. This is one of the major downsides of using fonts to display icons, but it does explain the rising use of <code>font-display: block</code>. We remain highly skeptical of the usage of icon fonts and feel that in most cases it will be better to provide icons as (embedded) SVG files.</p> <p>Emoji fonts do not suffer from this problem as emoji are encoded in Unicode so they’ll fall back to a system font properly when the font loading is delayed or fails. So it is safe to use emoji fonts on the web (using <code>font-display: swap</code> of course).</p> <h2 id="families-and-foundries"><a href="#families-and-foundries" class="anchor-link">Families and foundries</a></h2> <p>Which font families were most popular this year, and which foundries made them? Taking a look at the top 20 there are few surprises in the first ten entries compared to 2022. Roboto still leads the pack, with a small increase in use*. Font Awesome use has remained fairly stable, and so has Noto usage (unlike 2022, Noto is now split into script specific items). The only surprise is the decline of Lato, which has been overtaken by Poppins and Montserrat.</p> <aside class="note">* As noted in 2022 the discrepancy between desktop and mobile use of Roboto is mostly likely due to the use of <code>local()</code> which loads a locally installed version of Roboto; due to it being the system font on Android, usage on mobile is low.</aside> <p>Looking at the remainder of the top 20, Proxima Nova usage has increased slightly to reach about 1% of websites. As the only commercial, non-icon font in the top 20, this level of popularity is extremely impressive. Like in 2022, icon fonts make up about 18% of web fonts in 2024. The meteoric rise of Inter should also not go unnoticed, as it also stands around 1%. Due to its prominence in frameworks and libraries, we expect Inter to rise into the top 10 within the next few years.</p> <figure id="fig-18"> <div class="table-wrap"> <div class="table-wrap-container"> <table> <thead> <tr> <th>Family</th> <th>desktop</th> <th>mobile</th> </tr> </thead> <tbody> <tr> <td>Roboto</td> <td class="numeric">15.2%</td> <td class="numeric">2.7%</td> </tr> <tr> <td>Font Awesome</td> <td class="numeric">10.4%</td> <td class="numeric">12.4%</td> </tr> <tr> <td>Noto Sans JP</td> <td class="numeric">6.1%</td> <td class="numeric">5.7%</td> </tr> <tr> <td>Open Sans</td> <td class="numeric">5.6%</td> <td class="numeric">6.8%</td> </tr> <tr> <td>Poppins</td> <td class="numeric">4.7%</td> <td class="numeric">5.8%</td> </tr> <tr> <td>Montserrat</td> <td class="numeric">3.3%</td> <td class="numeric">3.9%</td> </tr> <tr> <td>Lato</td> <td class="numeric">3.2%</td> <td class="numeric">3.8%</td> </tr> <tr> <td>Noto Sans KR</td> <td class="numeric">1.6%</td> <td class="numeric">0.8%</td> </tr> <tr> <td>Source Sans Pro</td> <td class="numeric">1.4%</td> <td class="numeric">1.7%</td> </tr> <tr> <td>Noto Serif JP</td> <td class="numeric">1.2%</td> <td class="numeric">1.4%</td> </tr> <tr> <td>Proxima Nova</td> <td class="numeric">1.2%</td> <td class="numeric">1.2%</td> </tr> <tr> <td>Raleway</td> <td class="numeric">1.2%</td> <td class="numeric">1.4%</td> </tr> <tr> <td>Inter</td> <td class="numeric">1.0%</td> <td class="numeric">1.1%</td> </tr> <tr> <td>icomoon</td> <td class="numeric">0.9%</td> <td class="numeric">1.1%</td> </tr> <tr> <td>Oswald</td> <td class="numeric">0.7%</td> <td class="numeric">0.8%</td> </tr> <tr> <td>Ubuntu</td> <td class="numeric">0.6%</td> <td class="numeric">0.8%</td> </tr> <tr> <td>eicons</td> <td class="numeric">0.6%</td> <td class="numeric">0.8%</td> </tr> <tr> <td>Barlow</td> <td class="numeric">0.6%</td> <td class="numeric">0.7%</td> </tr> <tr> <td>Rubik</td> <td class="numeric">0.6%</td> <td class="numeric">0.6%</td> </tr> <tr> <td>NanumGothic</td> <td class="numeric">0.6%</td> <td class="numeric">0.3%</td> </tr> </tbody> </table> </div> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/#gid=536602154"> View data </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/design/fonts_family_by_foundry.sql"> View query </a> </li> </ul> </div> </div> <figcaption> <a href="#fig-18" class="anchor-link">Figure 4.18.</a> Top 20 family list for desktop and mobile. </figcaption> </figure> <p>Looking at foundries, the main surprise is the rise of Adobe Fonts as a foundry. There are two reasons for this change. This year we combined the two vendor identifiers that Adobe uses for their commercial and open source fonts. The other reason is that the Noto Sans CJK (Chinese, Japanese, Korean) fonts were a collaboration between Google, Adobe, and several other foundries. In 2022 these fonts were served with a Google vendor identifier and thus attributed to Google, but these fonts are now served with an Adobe vendor identifier and thus the very popular Noto CJK superfamily is attributed to Adobe.</p> <figure id="fig-19"> <div class="table-wrap"> <div class="table-wrap-container"> <table> <thead> <tr> <th>Foundry</th> <th>desktop</th> <th>mobile</th> </tr> </thead> <tbody> <tr> <td>Google Fonts</td> <td class="numeric">34%</td> <td class="numeric">19%</td> </tr> <tr> <td>Adobe Fonts</td> <td class="numeric">14%</td> <td class="numeric">15%</td> </tr> <tr> <td>Font Awesome</td> <td class="numeric">14%</td> <td class="numeric">19%</td> </tr> <tr> <td>Indian Type Foundry</td> <td class="numeric">7%</td> <td class="numeric">10%</td> </tr> <tr> <td>Łukasz Dziedzic</td> <td class="numeric">5%</td> <td class="numeric">6%</td> </tr> <tr> <td>Julieta Ulanovsky</td> <td class="numeric">5%</td> <td class="numeric">6%</td> </tr> <tr> <td>Mark Simonson Studio</td> <td class="numeric">2%</td> <td class="numeric">2%</td> </tr> <tr> <td>Ascender Corporation</td> <td class="numeric">2%</td> <td class="numeric">2%</td> </tr> <tr> <td>Paratype</td> <td class="numeric">2%</td> <td class="numeric">2%</td> </tr> <tr> <td>Linotype</td> <td class="numeric">1%</td> <td class="numeric">2%</td> </tr> </tbody> </table> </div> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/#gid=536602154"> View data </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/design/fonts_family_by_foundry.sql"> View query </a> </li> </ul> </div> </div> <figcaption> <a href="#fig-19" class="anchor-link">Figure 4.19.</a> Top 10 foundries for desktop and mobile. </figcaption> </figure> <p>For this year, we thought it would also be interesting to take a look at the top 10 self-hosted fonts and the top 10 fonts for Google Fonts and Adobe Fonts (we excluded Font Awesome as they only serve a single font).</p> <p>The top 10 for self-hosted fonts contains very few surprises. As we saw earlier, a lot of people switched from using hosted Google Fonts to self-hosting files from the Google Fonts library, and this is reflected in this list as well. Apart from Font Awesome, icomoon, and eicons, the most popular self-hosted families are all open source fonts.</p> <figure id="fig-20"> <div class="table-wrap"> <div class="table-wrap-container"> <table> <thead> <tr> <th>Rank</th> <th>Family</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Font Awesome</td> </tr> <tr> <td>2</td> <td>Open Sans</td> </tr> <tr> <td>3</td> <td>Roboto</td> </tr> <tr> <td>4</td> <td>Montserrat</td> </tr> <tr> <td>5</td> <td>Poppins</td> </tr> <tr> <td>6</td> <td>icomoon</td> </tr> <tr> <td>7</td> <td>Lato</td> </tr> <tr> <td>8</td> <td>eicons</td> </tr> <tr> <td>9</td> <td>Inter</td> </tr> <tr> <td>10</td> <td>Source Sans Pro</td> </tr> </tbody> </table> </div> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/#gid=125670327"> View data </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/performance/fonts_family_by_service.sql"> View query </a> </li> </ul> </div> </div> <figcaption> <a href="#fig-20" class="anchor-link">Figure 4.20.</a> Top 10 self-hosted families. </figcaption> </figure> <p>There is a close match between the top 10 most popular families from Google Fonts and the global top list. It should be noted that the Google Fonts top 10 contains quite a few CJK families (Noto Sans JP, Noto Sans KR, and Noto Serif JP) that are not present in the self-hosted list. It’s great that CJK languages are seeing more use and that Google is actively supporting the development of global scripts (more on that later in the <a href="#writing-systems">Writing systems</a> section).</p> <figure id="fig-21"> <div class="table-wrap"> <div class="table-wrap-container"> <table> <thead> <tr> <th>Rank</th> <th>Family</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Roboto</td> </tr> <tr> <td>2</td> <td>Noto Sans JP</td> </tr> <tr> <td>3</td> <td>Open Sans</td> </tr> <tr> <td>4</td> <td>Poppins</td> </tr> <tr> <td>5</td> <td>Lato</td> </tr> <tr> <td>6</td> <td>Montserrat</td> </tr> <tr> <td>7</td> <td>Noto Sans KR</td> </tr> <tr> <td>8</td> <td>Noto Serif JP</td> </tr> <tr> <td>9</td> <td>Source Sans Pro</td> </tr> <tr> <td>10</td> <td>Raleway</td> </tr> </tbody> </table> </div> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/#gid=125670327"> View data </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/performance/fonts_family_by_service.sql"> View query </a> </li> </ul> </div> </div> <figcaption> <a href="#fig-21" class="anchor-link">Figure 4.21.</a> Top 10 families from Google Fonts. </figcaption> </figure> <p>The Adobe Fonts top 10 list is quite distinct from the other top lists because it contains primarily commercial fonts that Adobe licenses from foundries. As such, it offers an interesting insight into the world of commercial type (well, at least those foundries that licensed their fonts to Adobe). The most popular font at Adobe Fonts is Proxima Nova, which is no surprise as it also holds a high position on the global list. It’s noteworthy that Adobe themselves only have two of their own fonts on the top list, with Adobe Garamond Pro at 4th and Acumin Pro at 7th place. The rest of the Adobe top 10 list is dominated by other foundries like <a hreflang="en" href="https://www.marksimonson.com/fonts/view/proxima-nova">Mark Simonson Studio</a> (Proxima Nova), <a hreflang="en" href="https://www.paratype.com/fonts/pt/futura-pt">Paratype</a> (Futura PT), <a hreflang="en" href="https://www.hvdfonts.com/fonts/brandon-grotesque">HvD fonts</a> (Brandon Grotesque), <a hreflang="en" href="https://www.motyfo.com/font-family/sofia-pro/">MoTyFo</a> (Sofia Pro), <a hreflang="en" href="https://www.daltonmaag.com/font-library/aktiv-grotesk.html">Dalton Maag</a> (Aktiv Grotesk), <a hreflang="en" href="https://europatype.com/">EuropaType</a> (Europa), <a hreflang="en" href="https://freightcollection.com/">The Freight Collection</a> (Freight Sans), and <a hreflang="en" href="https://www.exljbris.com/museosans.html">exljbris</a> (Museo Sans).</p> <figure id="fig-22"> <div class="table-wrap"> <div class="table-wrap-container"> <table> <thead> <tr> <th>Rank</th> <th>Family</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Proxima Nova</td> </tr> <tr> <td>2</td> <td>Futura PT Web</td> </tr> <tr> <td>3</td> <td>Brandon Grotesque</td> </tr> <tr> <td>4</td> <td>Adobe Garamond Pro</td> </tr> <tr> <td>5</td> <td>Sofia Pro</td> </tr> <tr> <td>6</td> <td>Aktiv Grotesk</td> </tr> <tr> <td>7</td> <td>Acumin Pro</td> </tr> <tr> <td>8</td> <td>Europa</td> </tr> <tr> <td>9</td> <td>FreightSans Pro</td> </tr> <tr> <td>10</td> <td>Museo Sans</td> </tr> </tbody> </table> </div> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/#gid=125670327"> View data </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/performance/fonts_family_by_service.sql"> View query </a> </li> </ul> </div> </div> <figcaption> <a href="#fig-22" class="anchor-link">Figure 4.22.</a> Top 10 families from Adobe Fonts. </figcaption> </figure> <p>As noted, there has been an uptick in the support of various global scripts over the last two years, so let’s take a look at that next!</p> <h2 id="writing-systems"><a href="#writing-systems" class="anchor-link">Writing systems</a></h2> <p>There are thousands of languages in the world, and these languages are represented in at least 150 distinct character sets, known as writing systems or simply scripts. This presents type designers and developers with the daunting task of making and supporting fonts for so many different scripts with their own unique features, idiosyncrasies, and technical demands. Among the world’s many character sets, the Latin script holds a position of somewhat dubious privilege as the longtime epicenter of digital type design. Because the Latin alphabet is the basis of digital character encodings and also the most commonly supported character set, other scripts tend to be commonly lumped into the unfortunate catch-all category of ’non-Latin’ fonts. This term is very Eurocentric and should no longer be used. While this change of terminology may not happen any time soon, the overall balance has begun to shift in recent years as the overall level of support for various scripts has expanded along with access to free, high-quality web fonts handling these character sets.</p> <p>The trend toward increasing support for multi-script fonts can be seen directly in this year’s data. The overall proportion of fonts supporting Latin stands at roughly 46% this year, declining by 8% for desktop and mobile websites since 2022. Meanwhile, there has been a corresponding increase in the number of fonts supporting multi-script text, amounting to many-fold increases essentially across the board. In other words, it’s not that fewer fonts are being made in languages like English, French, Swedish, and Polish that use the Latin script, but rather more fonts are now available to support scripts like Arabic, Cyrillic, Hangul, Devanagari, and many others that now represent a growing share of text across the web.</p> <p>To give a sense of where these increases have been most consequential, it helps to break down the level of script support in fonts by their overall presence. Cyrillic is the second most common script on the web, and rising. This year’s crawl found fonts supporting Cyrillic on 13% of websites, a rise of about seven percentage points from 2022. Meanwhile, Greek character support has also risen about five percentage points to total about 8% of all websites.</p> <figure id="fig-23"> <div class="figure-wrapper"> <a href="/static/images/2024/fonts/writing-systems.png" class=""> <img src="/static/images/2024/fonts/writing-systems.png" alt="Writing systems supported by fonts." aria-labelledby="fig-23-caption" aria-describedby="fig-23-description" width="600" height="486" data-width="600" data-height="486" data-seamless="" data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vTHmcrit1gMzxfZNeFp9LrA4NQSMEh140fapD4CFQ89knpy6LvEKz7VafGaFGlxCAxTdpLZXaVaq8Pg/pubchart?oid=1521239630&format=interactive" loading="lazy"> </a> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/#gid=1749442653"> View data </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/performance/styles_font_display.sql"> View query </a> </li> <li> <a href="/static/images/2024/fonts/writing-systems.png"> View image </a> </li> </ul> </div> </div> <button type="button" class="fig-description-button novisibility-until-js" aria-expanded="false" aria-controls="fig-23-description" data-show-text="Show description of Figure 4.23" data-hide-text="Hide description of Figure 4.23">Show description of Figure 4.23</button> <div id="fig-23-description" class="hidden">Bar chart showing the writing systems supported by fonts. Cyrillic is at 13% for both desktop and mobile, Greek is at 8% for desktop and 7.5% for mobile, Emoji are at 1.6% for both desktop and mobile, Katakana is at 1.2% for desktop and 0.9% for mobile, Hiragana is at 1.2% for desktop and 0.95% for mobile, Hebrew is at 1.1% for both desktop and mobile, Hangul is at 0.9% for desktop and 0.5% for mobile, Devanagari is at 0.9% for desktop and 0.8% for mobile, Arabic is at 0.7% for desktop and 1% for mobile, Thai is at 0.5% for both desktop and mobile, finally Han is at 0.4% for desktop and 0.3% for mobile. Omitted the Latin script at 47% for desktop and 46% for mobile to give better insight into the support for other scripts.</div> <figcaption id="fig-23-caption"> <a href="#fig-23" class="anchor-link">Figure 4.23.</a> Writing systems supported by fonts. </figcaption> </figure> <p>In terms of the world’s most widely used fonts, notable increases also registered in languages of the Indian subcontinent, East Asia, and the Middle East. Support for the Devanagari script, which is used for languages spoken by roughly 700 million people in Northern India and Nepal, has increased roughly three-fold. Likewise, support for Arabic has tripled, which is good news for over 400 million native speakers. Meanwhile, Thai support has nearly tripled for its 25-30 million speakers.</p> <p>Use of web fonts, however, remains near-zero for Chinese. This is most likely a matter of file size: these fonts are simply too large to serve as a simple WOFF2 file. Even compressed, a Chinese language font file will be several megabytes, which is far too large.</p> <p>A recent technical development called <a hreflang="en" href="https://www.w3.org/TR/2024/WD-IFT-20240709/">Incremental Font Transfer</a> (IFT) offers a promising solution to this problem. Languages like Chinese usually have an extraordinarily large possible character set, but not every document will use every character. The IFT specification attempts to solve this problem by splitting a font file into “chunks” of characters that are loaded on demand when needed. It essentially streams the required portions of a large font to the browser depending on the content of a particular page. We look forward to seeing more “large” scripts use IFT to load web fonts efficiently.</p> <p>In terms of the global scripts that are benefiting most from recent increases in web font support, some of the most dramatic numerical increases have registered for smaller language groups (found in less than 1% of fonts on this year’s crawl). Armenian support is up by roughly 500%, Cherokee by nearly 400%, and Tamil by about 300%. Writing systems found on fewer than 10,000 websites show even more dramatic increases from 2022. The Tibetan script showed a sixteen-fold increase this year, Syriac nine-fold, Samaritan roughly thirty-fold, and Balinese by about seven-fold. In other words, it’s not just the writing systems for huge populations like Hindi and Arabic that have benefited from the growing diversity of scripts supported by new type designs.</p> <p>So, which font families are most used for different scripts? The expansion of certain families into “superfamilies” supporting several different scripts has made this question somewhat more complicated than it once was. Families like Roboto, Open Sans, Montserrat, and Lato are not only among the most popular Latin fonts, but also register on the top list for Cyrillic and Greek. So just because it is included in the top list for a certain script doesn’t necessarily mean it is <em>used</em> for that script, it just means it <em>supports</em> that script.</p> <p>Noto is an outlier in this regard. Noto’s goal is to offer a single superfamily supporting every script encoded in the Unicode standard, which includes both living and extinct scripts. While Noto does not make the top 10 for Latin font families, where the competition is most intense, it is near the top for a large number of other scripts, particularly in East Asian countries using Noto’s CJK variants. Overall, Noto Sans and Serif together reached the top 10 for over 30 different scripts.</p> <p>Another complexity arises when gathering data to measure “support” of a script. Let’s say a given script, as defined by Unicode, has 100 characters. If a font includes 50 of those characters, does it support the script? Depending on your needs, the answer might be different. For the purpose of this chapter we have (rather arbitrarily) defined “support” as having more than 5% of that script’s characters. That’s a low threshold. The reason for this low threshold is that most scripts are complex, and very few fonts have 100% coverage of any given script. This low-threshold measurement is meant to capture the intent to support a script, and we feel that covering even 5% of a given script shows that the type designer did intend to support it. Needless to say, this approach will generate some false positives, and so we must take these results with a grain of salt.</p> <p>With those caveats out of the way, let’s take a look at the top lists for Arabic, Devanagari, Korean, Japanese, and Chinese. While there is some overlap between these scripts, there is usually less overlap with popular Latin fonts (apart from the exceptions noted above).</p> <p>The top 10 list for Arabic contains primarily fonts that were either designed explicitly for the Arabic script (for example, Cairo, Tajawal, and Almarai), or fonts created for other scripts that were extended to support Arabic (Droid Arabic, Segoe UI, Arial, DIN Next).</p> <figure id="fig-24"> <div class="table-wrap"> <div class="table-wrap-container"> <table> <thead> <tr> <th>Rank</th> <th>Family</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Cairo</td> </tr> <tr> <td>2</td> <td>Tajawal</td> </tr> <tr> <td>3</td> <td>Rubik</td> </tr> <tr> <td>4</td> <td>Almarai</td> </tr> <tr> <td>5</td> <td>Droid Arabic Kufi</td> </tr> <tr> <td>6</td> <td>Segoe UI</td> </tr> <tr> <td>7</td> <td>Material Design Icons</td> </tr> <tr> <td>8</td> <td>Arial</td> </tr> <tr> <td>9</td> <td>IRANSansWeb</td> </tr> <tr> <td>10</td> <td>DIN Next LT Arabic</td> </tr> </tbody> </table> </div> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/#gid=1749442653"> View data </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/design/fonts_family_by_script.sql"> View query </a> </li> </ul> </div> </div> <figcaption> <a href="#fig-24" class="anchor-link">Figure 4.24.</a> Top 10 families supporting Arabic. </figcaption> </figure> <p>The one oddity in the list of top Arabic web fonts is the inclusion of Material Design Icons. One possible reason for this font’s apparent popularity in Arabic is that it maps some icons to code points used in Arabic’s Unicode range, but we were unable to verify this conjecture through the actual crawl data. Regardless, what stands out most in the top 10 list for Arabic fonts is the variety of styles represented, which is great news because Arabic is a script with many distinctly expressive forms of writing.</p> <p>Like Arabic, the top 10 Devanagari family list contains a mix of fonts specifically designed for the Devanagari script and existing families extended to support Devanagari. The top font is Poppins, followed by Noto Sans. We’re not sure if these fonts are popular because they are used for Devanagari or if they’re in the list just because they’re popular and happen to support Devanagari. However, there’s no question about Hind, Mukta, Rajdhani, and Baloo 2, which are fonts explicitly designed for Devanagari.</p> <figure id="fig-25"> <div class="table-wrap"> <div class="table-wrap-container"> <table> <thead> <tr> <th>Rank</th> <th>Family</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Poppins</td> </tr> <tr> <td>2</td> <td>Noto Sans</td> </tr> <tr> <td>3</td> <td>Hind</td> </tr> <tr> <td>4</td> <td>Mukta</td> </tr> <tr> <td>5</td> <td>Segoe UI</td> </tr> <tr> <td>6</td> <td>Rajdhani</td> </tr> <tr> <td>7</td> <td>Teko</td> </tr> <tr> <td>8</td> <td>FiraGO</td> </tr> <tr> <td>9</td> <td>SVN-Poppins</td> </tr> <tr> <td>10</td> <td>Baloo 2</td> </tr> </tbody> </table> </div> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/#gid=1749442653"> View data </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/design/fonts_family_by_script.sql"> View query </a> </li> </ul> </div> </div> <figcaption> <a href="#fig-25" class="anchor-link">Figure 4.25.</a> Top 10 families supporting Devanagari. </figcaption> </figure> <p>For Korean, Pretendard is listed as the most commonly used font, with various Noto versions in the top 4 (adding up the totals for the various Noto versions would put it in the number one spot). And while open-source fonts have a strong presence in many writing systems, Korea had an especially strong showing: their ten most popular fonts are all open source!</p> <figure id="fig-26"> <div class="table-wrap"> <div class="table-wrap-container"> <table> <thead> <tr> <th>Rank</th> <th>Family</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Pretendard</td> </tr> <tr> <td>2</td> <td>Noto Sans KR</td> </tr> <tr> <td>3</td> <td>NotoKR</td> </tr> <tr> <td>4</td> <td>Noto Sans CJK KR</td> </tr> <tr> <td>5</td> <td>나눔고딕</td> </tr> <tr> <td>6</td> <td>Spoqa Han Sans Neo</td> </tr> <tr> <td>7</td> <td>SpoqaHanSans</td> </tr> <tr> <td>8</td> <td>NanumGothic</td> </tr> <tr> <td>9</td> <td>나눔스퀘어</td> </tr> <tr> <td>10</td> <td>SUIT</td> </tr> </tbody> </table> </div> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/#gid=1749442653"> View data </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/design/fonts_family_by_script.sql"> View query </a> </li> </ul> </div> </div> <figcaption> <a href="#fig-26" class="anchor-link">Figure 4.26.</a> Top 10 families supporting Korean. </figcaption> </figure> <p>The top 10 Japanese font list is surprisingly similar to the Korean list. Noto and Pretendard take the top spots. It’s also interesting to see three Korean fonts in the Japanese top 10 list: Noto Sans KR, 나눔고딕 (Nanum Gothic), and 나눔스퀘어 (Nanum Square). While these are Korean fonts, they also have support for a significant number of Japanese characters and, by our standard of measurement, have made the list. Having so much crossover with the Korean top 10 list, it’s fitting that the Japanese list also consists entirely of open-source fonts. Nice!</p> <figure id="fig-27"> <div class="table-wrap"> <div class="table-wrap-container"> <table> <thead> <tr> <th>Rank</th> <th>Family</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Noto Sans JP</td> </tr> <tr> <td>2</td> <td>Pretendard</td> </tr> <tr> <td>3</td> <td>Noto Serif JP</td> </tr> <tr> <td>4</td> <td>Noto Sans TC</td> </tr> <tr> <td>5</td> <td>Noto Sans KR</td> </tr> <tr> <td>6</td> <td>나눔고딕</td> </tr> <tr> <td>7</td> <td>Rounded Mplus 1c</td> </tr> <tr> <td>8</td> <td>Zen Kaku Gothic New</td> </tr> <tr> <td>9</td> <td>나눔스퀘어</td> </tr> <tr> <td>10</td> <td>Noto Sans CJK JP</td> </tr> </tbody> </table> </div> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/#gid=1749442653"> View data </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/design/fonts_family_by_script.sql"> View query </a> </li> </ul> </div> </div> <figcaption> <a href="#fig-27" class="anchor-link">Figure 4.27.</a> Top 10 families supporting Japanese. </figcaption> </figure> <p>Unfortunately, the data for top Chinese language fonts seems to be unreliable. The Chinese list only contains a single (Traditional) Chinese font. The rest of the families are all false positives, most likely due to the inclusion of Kanji in Japanese and Korean fonts. Kanji characters are adapted from the Chinese writing system, and due to the <a href="https://wikipedia.org/wiki/Han_unification">Han unification in Unicode</a> share the same code points as the Chinese writing systems.</p> <figure id="fig-28"> <div class="table-wrap"> <div class="table-wrap-container"> <table> <thead> <tr> <th>Rank</th> <th>Family</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Noto Sans JP</td> </tr> <tr> <td>2</td> <td>Noto Sans TC</td> </tr> <tr> <td>3</td> <td>나눔스퀘어</td> </tr> <tr> <td>4</td> <td>나눔바른고딕</td> </tr> <tr> <td>5</td> <td>나눔고딕</td> </tr> <tr> <td>6</td> <td>Noto Sans KR</td> </tr> <tr> <td>7</td> <td>源ノ角ゴシック JP</td> </tr> <tr> <td>8</td> <td>카카오OTF</td> </tr> <tr> <td>9</td> <td>Noto Sans CJK JP</td> </tr> <tr> <td>10</td> <td>Noto Serif JP</td> </tr> </tbody> </table> </div> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/#gid=1749442653"> View data </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/design/fonts_family_by_script.sql"> View query </a> </li> </ul> </div> </div> <figcaption> <a href="#fig-28" class="anchor-link">Figure 4.28.</a> Top 10 families supporting Chinese. </figcaption> </figure> <p>It’s fair to say there are very few Chinese (Traditional or Simplified) fonts being used. The reason is that Chinese has a very large possible set of characters (100,000 or more) and as noted above, Chinese fonts are especially large. This is an area where the new <a hreflang="en" href="https://www.w3.org/TR/2024/WD-IFT-20240709/">Incremental Font Transfer standard</a> will definitely help and we hope to see more Chinese fonts in the coming years (and many other writing systems!).</p> <h2 id="opentype-features"><a href="#opentype-features" class="anchor-link">OpenType features</a></h2> <p>OpenType features are one of the “hidden” gems in the OpenType format. Some OpenType features are required to render text correctly (quite common in various scripts) while others offer different stylistic options (for example, alternate versions of the ampersand). Browsers (and other applications) often enable some features by default in case they are required to render the text correctly, while others work on an opt-in basis. It’s up to the type designer to decide what OpenType features they’ll include in their fonts, so not all fonts have the same features. In this section we’ll take a look at the prevalence of OpenType features and how they’re used most often on the web.</p> <figure id="fig-29"> <div class="figure-wrapper"> <div class="big-number">55%</div> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/#gid=405374795"> View data </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/development/fonts_feature.sql"> View query </a> </li> </ul> </div> </div> <figcaption id="fig-29-caption"> <a href="#fig-29" class="anchor-link">Figure 4.29.</a> Fonts including OpenType features. </figcaption> </figure> <p>The prevalence of OpenType features has risen steadily in recent years, reaching about 55% of fonts. This marks an increase of about seven percentage points from 2022. Looking at individual features we see a similar increase. This year’s data shows ligature (<code>liga</code>) support up from 10% to 40%, kerning (<code>kern</code>) from 13% to 38%, localized forms (<code>locl</code>) from 10% to 27%, fractions (<code>frac</code>) from 8% to 26%, numerator (<code>numr</code>) from 7% to 19%, and denominator (<code>dnom</code>) from 7% to 19%.</p> <figure id="fig-30"> <div class="figure-wrapper"> <a href="/static/images/2024/fonts/opentype-feature-support-fonts.png" class=""> <img src="/static/images/2024/fonts/opentype-feature-support-fonts.png" alt="OpenType features support in fonts." aria-labelledby="fig-30-caption" aria-describedby="fig-30-description" width="600" height="371" data-width="600" data-height="371" data-seamless="" data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vTHmcrit1gMzxfZNeFp9LrA4NQSMEh140fapD4CFQ89knpy6LvEKz7VafGaFGlxCAxTdpLZXaVaq8Pg/pubchart?oid=212641271&format=interactive" loading="lazy"> </a> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/#gid=1573650259"> View data </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/development/fonts_feature.sql"> View query </a> </li> <li> <a href="/static/images/2024/fonts/opentype-feature-support-fonts.png"> View image </a> </li> </ul> </div> </div> <button type="button" class="fig-description-button novisibility-until-js" aria-expanded="false" aria-controls="fig-30-description" data-show-text="Show description of Figure 4.30" data-hide-text="Hide description of Figure 4.30">Show description of Figure 4.30</button> <div id="fig-30-description" class="hidden">Bar chart showing the OpenType features supported by fonts. Ligatures are supported in about 40% of fonts, kerning 38% of fonts on desktop and 39% on mobile, localized features 27% of fonts on both mobile and desktop, fractions 26% of fonts on mobile and desktop, numerators and demoninators at 19% of fonts on mobile and desktop, and finally tabular numbers and proportional numbers at 16% of fonts on both mobile and desktop.</div> <figcaption id="fig-30-caption"> <a href="#fig-30" class="anchor-link">Figure 4.30.</a> OpenType features support in fonts. </figcaption> </figure> <p>Some of OpenType’s lesser used features have also shown increased uptake in font files used on the web this year versus 2022: access to alternates (<code>aalt</code>, which provides multiple versions of a given character), ordinals (<code>ordn</code>, which provides ordinal numbers), and character composition (<code>ccmp</code>, which provides special character combinations) have each risen from about 1% to 3% support in fonts used for both desktop and mobile websites.</p> <p>It’s great that fonts now support more features, but are they actually being used on websites? There are two different CSS properties available to control the behavior of fonts on a website: <code>font-variant</code> (and its various longhand properties that make it up) and the lower-level <code>font-feature-settings</code>. The <code>font-variant</code> property is used to select from a set of predefined font variants, such as small caps (<code>small-caps</code>). The <code>font-feature-settings</code> property should primarily be used when there is no <code>font-variant</code> equivalent.</p> <figure id="fig-31"> <div class="figure-wrapper"> <a href="/static/images/2024/fonts/opentype-features-low-level-vs-high-level-properties.png" class=""> <img src="/static/images/2024/fonts/opentype-features-low-level-vs-high-level-properties.png" alt="Usage of font-feature-settings vs. font-variant." aria-labelledby="fig-31-caption" aria-describedby="fig-31-description" width="600" height="371" data-width="600" data-height="371" data-seamless="" data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vTHmcrit1gMzxfZNeFp9LrA4NQSMEh140fapD4CFQ89knpy6LvEKz7VafGaFGlxCAxTdpLZXaVaq8Pg/pubchart?oid=1344250718&format=interactive" loading="lazy"> </a> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/#gid=140686901"> View data </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/development/styles_feature_control.sql"> View query </a> </li> <li> <a href="/static/images/2024/fonts/opentype-features-low-level-vs-high-level-properties.png"> View image </a> </li> </ul> </div> </div> <button type="button" class="fig-description-button novisibility-until-js" aria-expanded="false" aria-controls="fig-31-description" data-show-text="Show description of Figure 4.31" data-hide-text="Hide description of Figure 4.31">Show description of Figure 4.31</button> <div id="fig-31-description" class="hidden">Bar chart showing the usage of <code>font-feature-settings</code> versus <code>font-variant</code>. The <code>font-feature-settings</code> property is used on 10.3% of desktop pages and 9.7% of mobile pages. In comparison, the <code>font-variant</code> property is used on 4.5% of desktop pages and 4.3% of mobile pages.</div> <figcaption id="fig-31-caption"> <a href="#fig-31" class="anchor-link">Figure 4.31.</a> Usage of <code>font-feature-settings</code> vs. <code>font-variant</code>. </figcaption> </figure> <p>Overall use of <code>font-feature-settings</code> is down by about 3 percentage points this year, from 13.3% to 10.3% on desktop and 12.6% to 9.7% on mobile websites. Meanwhile, use of <code>font-variant</code> has risen slightly, up from 3.9% to 4.5% on desktop and 3.5% to 4.3% on mobile websites. The most likely explanation is that more and more sites are using the newer (and better!) <code>font-variant</code> properties now that they are better supported. We hope to see this trend continue and <code>font-variant</code> eventually overtake <code>font-feature-settings</code> as the primary method to enable or disable OpenType features.</p> <p>This point is driven home if we take a look at the features used in combination with the <code>font-feature-settings</code> property. All of the top features used with <code>font-feature-settings</code> have <code>font-variant</code> equivalents!</p> <figure id="fig-32"> <div class="figure-wrapper"> <a href="/static/images/2024/fonts/popular-font-feature-settings-values.png" class=""> <img src="/static/images/2024/fonts/popular-font-feature-settings-values.png" alt="Most popular font-feature-settings values." aria-labelledby="fig-32-caption" aria-describedby="fig-32-description" width="600" height="371" data-width="600" data-height="371" data-seamless="" data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vTHmcrit1gMzxfZNeFp9LrA4NQSMEh140fapD4CFQ89knpy6LvEKz7VafGaFGlxCAxTdpLZXaVaq8Pg/pubchart?oid=133823749&format=interactive" loading="lazy"> </a> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/#gid=666056788"> View data </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/development/styles_font_feature_settings.sql"> View query </a> </li> <li> <a href="/static/images/2024/fonts/popular-font-feature-settings-values.png"> View image </a> </li> </ul> </div> </div> <button type="button" class="fig-description-button novisibility-until-js" aria-expanded="false" aria-controls="fig-32-description" data-show-text="Show description of Figure 4.32" data-hide-text="Hide description of Figure 4.32">Show description of Figure 4.32</button> <div id="fig-32-description" class="hidden">Bar chart showing the most popular <code>font-feature-settings</code> values. The <code>kern</code> feature tag is at 2.6% of desktop and mobile pages, the <code>liga</code> feature tag is used on 2.3% of desktop pages and 2.2% of mobile pages, the <code>tnum</code> feature tag is used on 0.8% of desktop and 0.7% of mobile pages, the <code>palt</code> feature tag is used on 0.7% of desktop pages and 0.6% of mobile pages, the <code>pnum</code> feature tag is used on 0.41% of desktop pages and 0.39% of mobile pages, the <code>lnum</code> feature tag is used at 0.4% of mobile and 0.3% of desktop pages, and finally the <code>calt</code> feature tag is used at 0.2% of both desktop and mobile pages.</div> <figcaption id="fig-32-caption"> <a href="#fig-32" class="anchor-link">Figure 4.32.</a> Most popular <code>font-feature-settings</code> values. </figcaption> </figure> <p>Worse, many of the features are enabled by default in all browsers (kerning, common ligatures, and contextual alternates), so there is no need to include it in <code>font-feature-settings</code>. The only reason would be to disable these features, but that would be an odd thing to do. The good news is that the use of these features hasn’t really grown since 2022. Aside from custom and non-standard OpenType features, there isn’t any need to use <code>font-feature-settings</code>. You can achieve expert-level typesetting with the <code>font-variant</code> properties alone.</p> <h2 id="variable-fonts"><a href="#variable-fonts" class="anchor-link">Variable fonts</a></h2> <p>Variable fonts represent a major advancement in expressive possibilities for digital typography. Officially known as OpenType Variable Fonts (OTVF), this format allows for the continuous variation of letterforms along a set of axes that fine-tune the font’s appearance. In other words, a single variable font file contains the full range of instances in a font family, as well as every granular adjustment and combination of adjustments the designer has defined along the specific axes included in the font. So, how does this work?</p> <p>Whereas a conventional font family may offer bold or thin weights, a variable font allows the user to make the letters exactly as bold or thin as they like using the weight (<code>wght</code>) axis. Likewise, tweaking the width (<code>wdth</code>) axis can push or pull the letterform into condensed and extended variants. And because the size of type often calls for fine adjustments (such as x-height) that affect legibility and typographic color, variable fonts permit subtle refinement of optical size until the letters feel just right for the space they occupy and role they play.</p> <p>In addition to giving designers and end-users more typographic expressiveness, variable fonts can also be a performance improvement if you use multiple styles from the same family. Internally variable fonts do not store outlines for each style, but a more efficient set of deltas and offsets, so a variable font can be many times smaller than their corresponding “static” styles.</p> <figure id="fig-33"> <div class="figure-wrapper"> <a href="/static/images/2024/fonts/variable-font-usage-over-time.png" class=""> <img src="/static/images/2024/fonts/variable-font-usage-over-time.png" alt="Usage of variable fonts on websites over time." aria-labelledby="fig-33-caption" aria-describedby="fig-33-description" width="600" height="371" data-width="600" data-height="371" data-seamless="" data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vTHmcrit1gMzxfZNeFp9LrA4NQSMEh140fapD4CFQ89knpy6LvEKz7VafGaFGlxCAxTdpLZXaVaq8Pg/pubchart?oid=1980743167&format=interactive" loading="lazy"> </a> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/#gid=86484570"> View data </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/development/fonts_variable.sql"> View query </a> </li> <li> <a href="/static/images/2024/fonts/variable-font-usage-over-time.png"> View image </a> </li> </ul> </div> </div> <button type="button" class="fig-description-button novisibility-until-js" aria-expanded="false" aria-controls="fig-33-description" data-show-text="Show description of Figure 4.33" data-hide-text="Hide description of Figure 4.33">Show description of Figure 4.33</button> <div id="fig-33-description" class="hidden">Bar chart showing variable font usage over time. In 2022, variable fonts were used on 28% of desktop pages and 29% of mobile pages. In 2023, variable fonts were used on 29% of desktop pages and 30% of mobile pages. In 2024 those numbers increased to 33% of desktop pages and 34% of mobile pages.</div> <figcaption id="fig-33-caption"> <a href="#fig-33" class="anchor-link">Figure 4.33.</a> Usage of variable fonts on websites over time. </figcaption> </figure> <p>While variable fonts may sound like an exotic new technology, they are already supported by all major browsers and are used on an increasing number and share of websites across the web. In all, about 33% of websites are now using variable fonts. This marks a 4–5 percentage point increase in variable fonts across the web since 2022. Even so, the jump in variable font adoption was much larger between 2020 and 2022, when the presence of variable fonts nearly tripled. It will be interesting to continue tracking this rate of adoption in the coming years to see whether variable font use keeps growing or has begun to reach a plateau.</p> <p>As an aside, usage doesn’t necessarily imply that a web developer chose to use a variable font over regular fonts. It’s very likely that quite a large percentage of web pages are using variable fonts because the service(s) they use chose to serve a variable font instead of regular font styles. Variable fonts usually contain instances that correspond to the individual styles of a font family, so a service can easily serve a variable font without web developers needing to modify their CSS styles. In fact, as noted in 2022, this is likely the cause of the sudden jump in variable font usage, as Google Fonts have been rapidly replacing their fonts with variable equivalents.</p> <figure id="fig-34"> <div class="table-wrap"> <div class="table-wrap-container"> <table> <thead> <tr> <th>Family</th> <th>desktop</th> <th>mobile</th> </tr> </thead> <tbody> <tr> <td>Noto Sans JP</td> <td class="numerical">27%</td> <td class="numerical">23%</td> </tr> <tr> <td>Open Sans</td> <td class="numerical">16%</td> <td class="numerical">18%</td> </tr> <tr> <td>Montserrat</td> <td class="numerical">9%</td> <td class="numerical">10%</td> </tr> <tr> <td>Noto Sans KR</td> <td class="numerical">7%</td> <td class="numerical">4%</td> </tr> <tr> <td>Noto Serif JP</td> <td class="numerical">5%</td> <td class="numerical">5%</td> </tr> <tr> <td>Raleway</td> <td class="numerical">3%</td> <td class="numerical">4%</td> </tr> <tr> <td>Inter</td> <td class="numerical">3%</td> <td class="numerical">3%</td> </tr> <tr> <td>Noto Sans TC</td> <td class="numerical">2%</td> <td class="numerical">2%</td> </tr> <tr> <td>Google Sans 18pt</td> <td class="numerical">2%</td> <td class="numerical">2%</td> </tr> <tr> <td>Oswald</td> <td class="numerical">2%</td> <td class="numerical">2%</td> </tr> </tbody> </table> </div> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/#gid=692423415"> View data </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/development/fonts_variable_family.sql"> View query </a> </li> </ul> </div> </div> <figcaption> <a href="#fig-34" class="anchor-link">Figure 4.34.</a> Top 10 most used variable fonts. </figcaption> </figure> <p>The most popular variable font family this year was Noto Sans JP, which was found on about 27% of desktop websites and 23% of mobile websites. Its serif variety, Noto Serif JP, accounted for a further 5% of websites. The Hangul version of the same font, Noto Sans KR, also pulled a considerable share, found on a little over 7% of sites using variable fonts. And while Noto Sans TC (Traditional Chinese) trailed at just about 2% and Noto Serif TC had a little under half a percent, altogether Noto’s CJK offerings have an impressive footprint in the current adoption of variable fonts: about 42% of all the sites using variable fonts come from the Noto super family.</p> <p>Open Sans was the second most popular variable font this year, being found on 16% of the websites using variable fonts. Montserrat was also found on 9%–10% of these websites. Given that both Open Sans and Montserrat support several of the most widely used scripts, including Greek and Cyrillic, the adaptability of these fonts to many use cases may help explain why these are some of the most used typefaces on the web, both as variable fonts and in general popularity.</p> <figure id="fig-35"> <div class="figure-wrapper"> <a href="/static/images/2024/fonts/variable-font-usage-by-service.png" class=""> <img src="/static/images/2024/fonts/variable-font-usage-by-service.png" alt="Popular hosts for serving variable fonts over time." aria-labelledby="fig-35-caption" aria-describedby="fig-35-description" width="600" height="371" data-width="600" data-height="371" data-seamless="" data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vTHmcrit1gMzxfZNeFp9LrA4NQSMEh140fapD4CFQ89knpy6LvEKz7VafGaFGlxCAxTdpLZXaVaq8Pg/pubchart?oid=906487759&format=interactive" loading="lazy"> </a> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/#gid=1090790567"> View data </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/development/fonts_variable_service.sql"> View query </a> </li> <li> <a href="/static/images/2024/fonts/variable-font-usage-by-service.png"> View image </a> </li> </ul> </div> </div> <button type="button" class="fig-description-button novisibility-until-js" aria-expanded="false" aria-controls="fig-35-description" data-show-text="Show description of Figure 4.35" data-hide-text="Hide description of Figure 4.35">Show description of Figure 4.35</button> <div id="fig-35-description" class="hidden">Column chart showing hosts for serving variable fonts over time. In 2022 Google Fonts served 97% of all variable fonts, this decreased only slightly in 2023 (97%) and dropped to 92% in 2024. In 2022 variable fonts were self-hosted on 3% of pages, 3% in 2023, and 8% in 2024.</div> <figcaption id="fig-35-caption"> <a href="#fig-35" class="anchor-link">Figure 4.35.</a> Popular hosts for serving variable fonts over time. </figcaption> </figure> <p>In terms of serving variable fonts, the vast majority of users choose between two options: Google and self-hosting. No other variable font source registered more than a fraction of a percent of the websites using this technology. And while Google Fonts serves the vast majority of variable fonts (92% desktop, 91% mobile), their share of this market has actually declined slightly in recent years. In 2022, Google Fonts served 97% of variable fonts for desktop and mobile, meaning their share is down about 5- 6% for desktop and mobile this year. This change corresponds to an equivalent rise in self-hosting as a website’s primary means of delivering variable fonts, amounting to 8% of sites crawled this year. Given that the share of non-Google variable fonts served in 2022 was just 3%, the corresponding rise of 5 percentage points in the share of websites that self-host variable fonts appears to reflect a direct drift in Google’s share of the variable font market. As noted above, other services like Adobe Fonts and Type Network served below 1% of the variable fonts found on the web this year.</p> <p>Like color fonts, variable fonts also have two competing outline formats: the variable extensions of the <code>glyf</code> format and Compact Font Format 2 (<code>CFF2</code>). The main technical differences between the <code>glyf</code> format and <code>CFF2</code> are the types of Bézier curves, more automated hinting, and (perhaps most importantly) the companies backing them. <code>CFF2</code> is backed by Adobe and <code>glyf</code> by all other major contributors to the OpenType specification (Google, Microsoft, and Apple).</p> <figure id="fig-36"> <div class="figure-wrapper"> <div class="big-number">99%</div> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/#gid=1116222836"> View data </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/development/fonts_variable_format.sql"> View query </a> </li> </ul> </div> </div> <figcaption id="fig-36-caption"> <a href="#fig-36" class="anchor-link">Figure 4.36.</a> Variable fonts using the <code>glyf</code> outline format. </figcaption> </figure> <p>Unfortunately for Adobe, over 99% of the outlines used for variable fonts this year were in the <code>glyf</code> format. This overwhelming share for <code>glyf</code> outlines has been fairly consistent since 2022, dropping only 0.2 percentage points in the intervening two years. Since variable fonts introduction in 2016, <code>CFF2</code> has only accumulated a miniscule 0.6% of usage. Usage of <code>CFF2</code> just doesn’t seem to be picking up and it’s worth wondering if efforts are not better spent elsewhere.</p> <p> For now, our recommendation is the same as in 2022: <em>avoid <code>CFF2</code> based variable fonts</em> because browser and operating system support is still patchy (and there is a perfectly viable alternative in <code>glyf</code>). </p> <figure id="fig-37"> <div class="figure-wrapper"> <a href="/static/images/2024/fonts/variable-font-axes.png" class=""> <img src="/static/images/2024/fonts/variable-font-axes.png" alt="Support of font axes in variable fonts." aria-labelledby="fig-37-caption" aria-describedby="fig-37-description" width="600" height="371" data-width="600" data-height="371" data-seamless="" data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vTHmcrit1gMzxfZNeFp9LrA4NQSMEh140fapD4CFQ89knpy6LvEKz7VafGaFGlxCAxTdpLZXaVaq8Pg/pubchart?oid=708080497&format=interactive" loading="lazy"> </a> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/#gid=1751101951"> View data </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/development/fonts_variable_axis.sql"> View query </a> </li> <li> <a href="/static/images/2024/fonts/variable-font-axes.png"> View image </a> </li> </ul> </div> </div> <button type="button" class="fig-description-button novisibility-until-js" aria-expanded="false" aria-controls="fig-37-description" data-show-text="Show description of Figure 4.37" data-hide-text="Hide description of Figure 4.37">Show description of Figure 4.37</button> <div id="fig-37-description" class="hidden">Column chart showing support of font axes in variable fonts. The <code>wght</code> axis is supported by 99% of variable fonts on both mobile and desktop, the <code>slnt</code> axis is supported by 4.1% of fonts on desktop and 4.7% on mobile, the <code>wdth</code> axis is supported by 2.8% of fonts on desktop and 2.4% on mobile, the <code>opsz</code> axis is supported by 2.8% of fonts on desktop and 2.4% on mobile, the <code>GRAD</code> axis is supported by 0.6% of fonts on desktop and 0.5% on mobile, finally the <code>ital</code> axis is supported by 0.5% of fonts on desktop and 0.3% on mobile.</div> <figcaption id="fig-37-caption"> <a href="#fig-37" class="anchor-link">Figure 4.37.</a> Support of font axes in variable fonts. </figcaption> </figure> <p>In order to get a sense of how type designers are approaching the technical affordances of variable fonts, this is the first year the HTTP Almanac has gathered data about the axes supported in variable fonts used on the web. At over 99%, no other variable font axis comes close to the near ubiquity of <code>wght</code>. Trailing in the single digits were slant (<code>slnt</code>) at 5%, width (<code>wdth</code>) with 2%, optical size (<code>opsz</code>) with 2%, and the grade axis (<code>GRAD</code>) with about half a percent on desktop and mobile websites. It will be interesting in the coming years to continue tracking which axes are found in variable fonts on the web because this will signal trends in the design and availability of different affordances for using these fonts.</p> <p>Beyond these trends in the design of variable fonts, how are these variable font axes actually being used on websites? For that, we turn to CSS data. There are generally two ways to use variable fonts in CSS, through the low-level <code>font-variation-settings</code> property or through the good old <code>font-weight</code>, <code>font-stretch</code>, and <code>font-style</code> properties that have been updated to support variable fonts.</p> <p>It’s difficult to detect usage of variable fonts with the standard font properties in CSS because it requires reconstructing the CSS object model and tracing the usage of each family and associated property for each crawled site. Instead we take a look at the usage of <code>font-variation-settings</code> as an approximation (so take these results with a grain of salt).</p> <figure id="fig-38"> <div class="figure-wrapper"> <a href="/static/images/2024/fonts/font-variation-axes.png" class=""> <img src="/static/images/2024/fonts/font-variation-axes.png" alt="Use of font-variation-settings axes on pages using variable fonts." aria-labelledby="fig-38-caption" aria-describedby="fig-38-description" width="600" height="371" data-width="600" data-height="371" data-seamless="" data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vTHmcrit1gMzxfZNeFp9LrA4NQSMEh140fapD4CFQ89knpy6LvEKz7VafGaFGlxCAxTdpLZXaVaq8Pg/pubchart?oid=1881791600&format=interactive" loading="lazy"> </a> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/#gid=1046824821"> View data </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/development/styles_font_variable_settings_axis.sql"> View query </a> </li> <li> <a href="/static/images/2024/fonts/font-variation-axes.png"> View image </a> </li> </ul> </div> </div> <button type="button" class="fig-description-button novisibility-until-js" aria-expanded="false" aria-controls="fig-38-description" data-show-text="Show description of Figure 4.38" data-hide-text="Hide description of Figure 4.38">Show description of Figure 4.38</button> <div id="fig-38-description" class="hidden">Column chart showing the use of <code>font-variation-settings</code> axes. The <code>wght</code> axis is used on 75% of desktop pages and 78% of mobile pages, the <code>opsz</code> axis is used on 36% of desktop pages and 35% of mobile pages, the <code>FILL</code> axis is used on 30% of both desktop and mobile pages, the <code>GRAD</code> axis is used on 28% of desktop and 29% of mobile pages, the <code>wdth</code> axis is used on 18% of both mobile and desktop pages, the <code>SOFT</code> axis is used on 9% of desktop pages and 10% of mobile pages, the <code>slnt</code> axis is used on 9% of desktop sites and 8% of mobile pages, finally, the <code>ital</code> axis is used on 3% of desktop pages and 2% of mobile pages.</div> <figcaption id="fig-38-caption"> <a href="#fig-38" class="anchor-link">Figure 4.38.</a> Use of <code>font-variation-settings</code> axes on pages using variable fonts. </figcaption> </figure> <p>The weight axis (<code>wght</code>) remains the most commonly used variable font axis by a wide margin. This axis, which affects the thinness or boldness of glyphs, was found on over 78% of sites using variable fonts this year. This is a slight decline from two years ago when the weight axis was used on 82% of sites. This decline is most likely due to an increase in people switching to the more common <code>font-weight</code> property for setting variable font weight axis values. At the same time, we see an increase in most other “standard” axes: <code>opsz</code> (optical size), <code>wdth</code> (width), <code>slnt</code> (slant), and <code>ital</code> (italic). While there are standard CSS properties for each of these axes, people are either not aware of how to use them or are following old out-dated advice. We hope to see the use of these values drop over the coming years as more people become accustomed to using variable fonts.</p> <p>It’s also good to see growing use of several non-standard axes (<code>FILL</code>, <code>GRAD</code> or grade, and <code>SOFT</code>) which do not have CSS properties to control them. The only way to use these axes is through the <code>font-variation-settings</code> property. If their popularity grows, it would be a clear indicator to the authors of the CSS specification (and the OpenType standard) that these axes deserve their own CSS properties (if applicable; some axes are highly specific to a single typeface and can not be standardized).</p> <p>Other interesting trends appear in the use of more niche variable font features this year. Variable font animation is on the rise but remains quite low. In 2022, a total of just 163 desktop and 147 mobile sites were found to use animation by the HTTP Archive crawl, but this year that figure grew to 35,000 desktop and 46,000 mobile sites. On the scale of the internet, this is still just a tiny fraction of websites (0.28%), but suggests that more advanced variable font features are slowly being adopted.</p> <h2 id="color-fonts"><a href="#color-fonts" class="anchor-link">Color fonts</a></h2> <p>Color fonts, also known as chromatic fonts, offer the capacity to display letters in multiple colors or gradients.</p> <figure id="fig-39"> <div class="figure-wrapper"> <a href="/static/images/2024/fonts/nabla-color.png" class=""> <img src="/static/images/2024/fonts/nabla-color.png" class="" alt="Nabla Color a COLR v1 font using gradients by Arthur Reinders Folmer (Typearture) and engineered by Just van Rossum." aria-labelledby="fig-39-caption" aria-describedby="fig-39-description" width="2243" height="1179" loading="lazy"> </a> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="/static/images/2024/fonts/nabla-color.png"> View image </a> </li> </ul> </div> </div> <button type="button" class="fig-description-button novisibility-until-js" aria-expanded="false" aria-controls="fig-39-description" data-show-text="Show description of Figure 4.39" data-hide-text="Hide description of Figure 4.39">Show description of Figure 4.39</button> <div id="fig-39-description" class="hidden">A specimen of the font Nabla Color by Arthur Reinders and Just van Rossum showing three lines of 3D color text spelling out "ISOMETRIC, CHROMATIC, PROJECTED".</div> <figcaption id="fig-39-caption"> <a href="#fig-39" class="anchor-link">Figure 4.39.</a> <a hreflang="en" href="https://nabla.typearture.com/">Nabla Color</a> a COLR v1 font using gradients by Arthur Reinders Folmer (<a hreflang="en" href="https://www.typearture.com/">Typearture</a>) and engineered by <a href="https://wikipedia.org/wiki/Just_van_Rossum">Just van Rossum</a>. </figcaption> </figure> <p>The number of websites using color fonts is still quite small on the scale of the entire internet, but has risen considerably over the last two years. The 2022 crawl found color fonts on between 1,000–1,400 websites, amounting to 0.02% of the total websites surveyed in that year’s data. This year’s crawl found color fonts on between 5,800–6,200 websites, amounting to 0.04%. Going by these figures, it would appear that the number of websites using color fonts has tripled over the last two years, despite remaining a small fraction of all websites.</p> <figure id="fig-40"> <div class="figure-wrapper"> <a href="/static/images/2024/fonts/color-font-usage-over-time.png" class=""> <img src="/static/images/2024/fonts/color-font-usage-over-time.png" alt="Color font usage over time." aria-labelledby="fig-40-caption" aria-describedby="fig-40-description" width="600" height="371" data-width="600" data-height="371" data-seamless="" data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vTHmcrit1gMzxfZNeFp9LrA4NQSMEh140fapD4CFQ89knpy6LvEKz7VafGaFGlxCAxTdpLZXaVaq8Pg/pubchart?oid=2100804676&format=interactive" loading="lazy"> </a> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/#gid=1377799204"> View data </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/development/fonts_color.sql"> View query </a> </li> <li> <a href="/static/images/2024/fonts/color-font-usage-over-time.png"> View image </a> </li> </ul> </div> </div> <button type="button" class="fig-description-button novisibility-until-js" aria-expanded="false" aria-controls="fig-40-description" data-show-text="Show description of Figure 4.40" data-hide-text="Hide description of Figure 4.40">Show description of Figure 4.40</button> <div id="fig-40-description" class="hidden">Column chart showing color font usage over time. In 2022, color font usage was at 0.01% of pages for both desktop and mobile, in 2023 usage was at 0.02% of desktop and mobile pages, in 2024 usage is at 0.05% of desktop pages and 0.04% of mobile pages.</div> <figcaption id="fig-40-caption"> <a href="#fig-40" class="anchor-link">Figure 4.40.</a> Color font usage over time. </figcaption> </figure> <p>As a relatively new technology, color font use is split between several competing formats. The most popular color font formats, <code>SVG</code> (also called OT-SVG, not to be confused with SVG images) and <code>COLR</code>, are based on vector outlines. The difference between these two is that <code>COLR</code> reuses the outline format in the font itself (i.e. either <code>glyf</code> or <code>CFF</code>) while <code>SVG</code> embeds an SVG document for each glyph. <code>COLR</code> also provides integration with OpenType Variations, a feature that OT-SVG lacks. So it is possible to make a color variable font using <code>COLR</code> (see <a hreflang="en" href="https://nabla.typearture.com/">Nabla</a> for a great example of a color variable font), but not with <code>SVG</code>. Still, <code>SVG</code> was the most commonly used format this year, being found on 53% of desktop sites with color fonts. The <code>COLR</code> format has two different versions: <code>v0</code> and <code>v1</code> (a newer version of <code>COLR</code> with more features, such as gradients). We’ll refer to these as <code>COLRv0</code> and <code>COLRv1</code> from here. <code>COLRv0</code> fonts also carried a considerable share with 28% of desktop sites. In contrast, <code>COLRv1</code> fonts were found on just 8% of desktop sites using color fonts.</p> <figure id="fig-41"> <div class="figure-wrapper"> <a href="/static/images/2024/fonts/color-font-format-usage.png" class=""> <img src="/static/images/2024/fonts/color-font-format-usage.png" alt="Color font format usage." aria-labelledby="fig-41-caption" aria-describedby="fig-41-description" width="600" height="371" data-width="600" data-height="371" data-seamless="" data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vTHmcrit1gMzxfZNeFp9LrA4NQSMEh140fapD4CFQ89knpy6LvEKz7VafGaFGlxCAxTdpLZXaVaq8Pg/pubchart?oid=1477434065&format=interactive" loading="lazy"> </a> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/#gid=749438529"> View data </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/development/fonts_color_format.sql"> View query </a> </li> <li> <a href="/static/images/2024/fonts/color-font-format-usage.png"> View image </a> </li> </ul> </div> </div> <button type="button" class="fig-description-button novisibility-until-js" aria-expanded="false" aria-controls="fig-41-description" data-show-text="Show description of Figure 4.41" data-hide-text="Hide description of Figure 4.41">Show description of Figure 4.41</button> <div id="fig-41-description" class="hidden">Column chart showing color font usage by color format. The <code>SVG</code> format was used by 53% of color fonts on desktop and 55% on mobile, the <code>COLRv0</code> format was used by 28% of color fonts on desktop and 20% on mobile, the <code>sbix</code> format was used by 13% on desktop and 20% on mobile, the <code>COLRv1</code> format was used by 8% of color fonts on desktop and 6% on mobile, finally, the <code>CBDT</code> format was used by 3% of color fonts on desktop and 2% of mobile pages.</div> <figcaption id="fig-41-caption"> <a href="#fig-41" class="anchor-link">Figure 4.41.</a> Color font format usage. </figcaption> </figure> <p>The two raster-based color font formats, SBIX (Sbit Binary Image eXtension, lowercased as an OpenType table) and <code>CBDT</code>, were found on a small but notable share of websites using this technology. SBIX accounted for 13% of desktop, while <code>CBDT</code> files made up 3% of desktop color fonts.</p> <p>The most popular color font families this year were Noto Color Emoji (25% desktop, 28% mobile) and Joy Pixels SVG (23% desktop, 11% mobile). Two Japanese fonts also registered a strong share of color fonts in this year’s data: 貂明朝 (Ten Mincho, 11% desktop, 13% mobile) and 貂明朝テキスト(Ten Mincho Text, 7% desktop, 9% mobile). However, as we’ll see later, it is questionable to call these true color fonts as they contain only a handful of color glyphs.</p> <figure id="fig-42"> <div class="table-wrap"> <div class="table-wrap-container"> <table> <thead> <tr> <th>Family</th> <th>desktop</th> <th>mobile</th> </tr> </thead> <tbody> <tr> <td>Noto Color Emoji</td> <td class="numeric">25%</td> <td class="numeric">28%</td> </tr> <tr> <td>JoyPixelsSVG</td> <td class="numeric">23%</td> <td class="numeric">11%</td> </tr> <tr> <td>貂明朝</td> <td class="numeric">11%</td> <td class="numeric">13%</td> </tr> <tr> <td>貂明朝テキスト</td> <td class="numeric">7%</td> <td class="numeric">9%</td> </tr> <tr> <td>Toss Face Font Mac</td> <td class="numeric">4%</td> <td class="numeric">7%</td> </tr> <tr> <td>noto-glyf_colr_1</td> <td class="numeric">3%</td> <td class="numeric">2%</td> </tr> <tr> <td>Material Icons Two Tone</td> <td class="numeric">3%</td> <td class="numeric">5%</td> </tr> <tr> <td>Twemoji Mozilla</td> <td class="numeric">1%</td> <td class="numeric">0%</td> </tr> <tr> <td>Aref Ruqaa Ink</td> <td class="numeric">1%</td> <td class="numeric">1%</td> </tr> <tr> <td>Cairo Play</td> <td class="numeric">1%</td> <td class="numeric">2%</td> </tr> </tbody> </table> </div> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/#gid=2059416190"> View data </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/development/fonts_color_family.sql"> View query </a> </li> </ul> </div> </div> <figcaption> <a href="#fig-42" class="anchor-link">Figure 4.42.</a> Top 10 most used color fonts. </figcaption> </figure> <p>We wanted to draw special attention to the most used color font: Noto Color Emoji. It is somewhat unique in that it comes in multiple color formats and thus occupies several spots on the list of most popular color fonts. Noto Color Emoji has a <code>COLR</code>, <code>CBDT</code> (raster), and an <code>SVG</code> version. The <code>COLR</code> version is the most popular, followed by <code>CBDT</code>, and finally <code>SVG</code>.</p> <p>Given the relatively small number of websites with color fonts, usage trends over the last two years have led to some significant changes in the most popular formats. There was a large decrease in the use of <code>SVG</code> from 82% in 2022 to 53% in 2024. Both <code>COLRv0</code> and <code>COLRv1</code> saw a steady increase in use in 2023 and 2024. The combined use of <code>COLRv0</code> and <code>COLRv1</code> formats was 26% of total color font usage in 2023 and 36% in 2024. That’s a significant increase, and is expected to continue as <code>SVG</code> declines in popularity.</p> <figure id="fig-43"> <div class="figure-wrapper"> <a href="/static/images/2024/fonts/color-font-format-usage-over-time.png" class=""> <img src="/static/images/2024/fonts/color-font-format-usage-over-time.png" alt="Color font format usage over time." aria-labelledby="fig-43-caption" aria-describedby="fig-43-description" width="600" height="371" data-width="600" data-height="371" data-seamless="" data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vTHmcrit1gMzxfZNeFp9LrA4NQSMEh140fapD4CFQ89knpy6LvEKz7VafGaFGlxCAxTdpLZXaVaq8Pg/pubchart?oid=2116900403&format=interactive" loading="lazy"> </a> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/#gid=749438529"> View data </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/development/fonts_color_format.sql"> View query </a> </li> <li> <a href="/static/images/2024/fonts/color-font-format-usage-over-time.png"> View image </a> </li> </ul> </div> </div> <button type="button" class="fig-description-button novisibility-until-js" aria-expanded="false" aria-controls="fig-43-description" data-show-text="Show description of Figure 4.43" data-hide-text="Hide description of Figure 4.43">Show description of Figure 4.43</button> <div id="fig-43-description" class="hidden">Column chart showing color font format usage over time. Usage of <code>SVG</code> was at 82% in 2022, 73% in 2023, and 53% in 2024. <code>COLRv0</code> usage was at 18% in 2022, 21% in 2023, and 28% in 2024. <code>sbix</code> usage was at 1% in 2022 and 2023, and 13% in 2024. <code>COLRv1</code> usage as at 0% usage in 2022, 5% in 2023, and 8% in 2024. <code>CBDT</code> usage was at 3% in 2022, 4% in 2023, and 3% in 2024.</div> <figcaption id="fig-43-caption"> <a href="#fig-43" class="anchor-link">Figure 4.43.</a> Color font format usage over time. </figcaption> </figure> <p>The most unexpected change in this year’s color font data is the sudden rise in SBIX format. SBIX was introduced by Apple to support the storage of bitmap images within font files. However, the SBIX format has some limitations when it comes to efficiency: binary overhead and lack of compression. This year’s rise in SBIX usage is almost entirely due to the popularity of the <a hreflang="en" href="https://toss.im/tossface">Toss Face Font</a>, a Korean font with thousands of emojis and a very large file size. At 12.7 MB uncompressed and 11.7 MB compressed (WOFF2), this font would surely be better delivered in the <code>COLR</code> format. In fact, the home page for Toss Face Font is using a simplified <code>COLRv0</code> font, which, sadly, does not appear to be publicly available. The <code>COLRv0</code> version weighs in at 6 MB uncompressed and 1.1 MB compressed (WOFF2). While it may be hard to create a <code>COLRv1</code> version with the same fidelity as the SBIX version, the <code>COLRv0</code> version demonstrates the benefits of conversion to a vector format in terms of file size reduction. We hope the <code>COLRv0</code> version is soon made available to the public, and this sudden rise in SBIX usage is a temporary blip.</p> <p>Although emoji offered a major impetus for the initial development and support of color fonts, the last edition of the HTTP Almanac found a surprising lack of emojis on websites where color fonts had been used (just 4% of the desktop crawl and 2% of mobile). This year’s data shows a strong upward shift in the use of color fonts for emoji: 42% of desktop and 31% percent of mobile results found a color font with at least some emoji characters. While this signals significant growth in the use of color fonts for emoji, it is also worth noting (once again) that the total number of websites using color fonts is still quite small. This year’s crawl found color fonts on about 5,800 desktop and 6,200 mobile sites across the web.</p> <p>It’s worth noting a point of complexity in the data gathered on color fonts. Our analysis considers a font with a single color glyph a color font. That is a rather broad definition and also includes many fonts which are primarily used for their non-color glyphs. If we remove fonts with only a small percentage of color glyphs from the equation, the use of color font technology looks very different. For example, the top three fonts using <code>SVG</code>, 貂明朝 (Ten Mincho), 貂明朝テキスト (Ten Mincho Text), and Source Code Pro make up a combined 41% of <code>SVG</code> total usage, while having only a handful of color glyphs. Removing all “color” fonts with less than 5% of their codepoints mapped to color glyphs from the calculation would reduce the share of <code>SVG</code> to roughly 5%! While the <code>COLR</code> formats also have some fonts with a low percentage of color glyphs, that percentage is much lower at 3-4%, reducing the <code>COLRv0</code> share to 25.1% and 7.2% for <code>COLRv1</code>. This would make <code>COLR</code> the most popular format by far!</p> <figure id="fig-44"> <div class="figure-wrapper"> <a href="/static/images/2024/fonts/color-font-formats.png" class=""> <img src="/static/images/2024/fonts/color-font-formats.png" alt="Most popular color formats after removing fonts with only a handful of color glyphs." aria-labelledby="fig-44-caption" aria-describedby="fig-44-description" width="600" height="371" data-width="600" data-height="371" data-seamless="" data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vTHmcrit1gMzxfZNeFp9LrA4NQSMEh140fapD4CFQ89knpy6LvEKz7VafGaFGlxCAxTdpLZXaVaq8Pg/pubchart?oid=892501065&format=interactive" loading="lazy"> </a> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/#gid=463077022"> View data </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/development/fonts_color_format_by_family.sql"> View query </a> </li> <li> <a href="/static/images/2024/fonts/color-font-formats.png"> View image </a> </li> </ul> </div> </div> <button type="button" class="fig-description-button novisibility-until-js" aria-expanded="false" aria-controls="fig-44-description" data-show-text="Show description of Figure 4.44" data-hide-text="Hide description of Figure 4.44">Show description of Figure 4.44</button> <div id="fig-44-description" class="hidden">Column chart showing color font usage by color format for fonts with more than 5% of color glyphs. The <code>COLRv0</code> format is at 25%, the <code>sbix</code> format is at 12%, the <code>COLRv1</code> format at 7%, the <code>SVG</code> format is at 5%, and the <code>CBDT</code> format is at 3%.</div> <figcaption id="fig-44-caption"> <a href="#fig-44" class="anchor-link">Figure 4.44.</a> Most popular color formats after removing fonts with only a handful of color glyphs. </figcaption> </figure> <p>We plan to refine our analysis of color fonts in future editions of the Almanac, but our expectation is that <code>COLR</code> usage will continue to grow and it will soon become the dominant color font format (if it isn’t already).</p> <aside class="note">The observant reader may have noticed that the color font usage percentages between the 2022 fonts chapter and 2024 font chapter are slightly different. On closer inspection of the color font data we noticed that some popular font tools include an empty <code>SVG</code> table, even though the font does not contain any color glyphs. This erroneously caused the popularity of <code>SVG</code> to be inflated. We have corrected this in 2024 and included the 2022 and 2023 data for comparison.</aside> <h2 id="font-smoothing"><a href="#font-smoothing" class="anchor-link">Font smoothing</a></h2> <p>The <a href="https://developer.mozilla.org/docs/Web/CSS/font-smooth">non-standard CSS font smoothing properties</a> claim to allow developers to choose between different ways of rendering a font. As these are non-standard properties, they are prefixed with a dash and a vendor prefix: <code>-webkit-font-smoothing</code> and <code>-moz-osx-font-smoothing</code>. Theoretically they allow web developers to switch between grayscale and subpixel antialiasing on Apple’s MacOS only. That’s interesting because in 2018, <a href="https://wikipedia.org/wiki/MacOS_Mojave#Removed_features">Apple removed subpixel antialiasing from MacOS</a> with the release of Mojave. Even more interesting, more than about 70-77% of all websites set this property to <code>antialiased</code> or <code>grayscale</code>.</p> <figure id="fig-45"> <div class="figure-wrapper"> <a href="/static/images/2024/fonts/font-smoothing-usage.png" class=""> <img src="/static/images/2024/fonts/font-smoothing-usage.png" alt="Font smoothing property usage." aria-labelledby="fig-45-caption" aria-describedby="fig-45-description" width="600" height="371" data-width="600" data-height="371" data-seamless="" data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vTHmcrit1gMzxfZNeFp9LrA4NQSMEh140fapD4CFQ89knpy6LvEKz7VafGaFGlxCAxTdpLZXaVaq8Pg/pubchart?oid=70663476&format=interactive" loading="lazy"> </a> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/#gid=1289816564"> View data </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/development/styles_smoothing.sql"> View query </a> </li> <li> <a href="/static/images/2024/fonts/font-smoothing-usage.png"> View image </a> </li> </ul> </div> </div> <button type="button" class="fig-description-button novisibility-until-js" aria-expanded="false" aria-controls="fig-45-description" data-show-text="Show description of Figure 4.45" data-hide-text="Hide description of Figure 4.45">Show description of Figure 4.45</button> <div id="fig-45-description" class="hidden">Column chart showing <code>font-smoothing</code> properties and their values. The <code>-webkit-font-smoothing: antialiased</code> property is at 77% of desktop and mobile pages, the <code>-moz-osx-font-smoothing: grayscale</code> property is used on 69% of desktop and mobile pages, the <code>-webkit-font-smoothing; auto</code> property is used on 13% of desktop and mobile pages, and the <code>-webkit-font-smoothing: subpixel-antialiased</code> property is used at 12% of desktop and mobile pages.</div> <figcaption id="fig-45-caption"> <a href="#fig-45" class="anchor-link">Figure 4.45.</a> Font smoothing property usage. </figcaption> </figure> <p>So what is going on here? Why is everyone setting this property if MacOS uses grayscale antialiasing regardless of the value of the property? Is it legacy cruft set by old versions of CSS libraries and frameworks, or does it actually do <em>something</em>?</p> <p>To clear this up: the property does nothing on other operating systems and it does not change the antialiasing settings on MacOS. However, it disables the MacOS-specific stem darkening that makes fonts look a little bolder than they were drawn. Apple implemented this to improve the legibility of small text by making the stems (the vertical parts of a letter) a bit thicker. Setting <code>-webkit-font-smoothing: antialiased</code> (and its <code>-moz</code> equivalent) disables this stem darkening and makes the font appear a little lighter, especially on darker backgrounds.</p> <p>Our hunch is that a lot of designers and developers do not like this MacOS-specific behavior and use these properties to disable it. We’re not clear what the best solution might be. It’s clearly a MacOS-only issue (which would generally disqualify it from standardization in CSS). Standardizing the <code>font-smoothing</code> property does not make sense either. The stem darkening is only tangentially related to antialiasing, plus browsers and operating systems generally don’t allow you to switch antialiasing methods anyway. However, judging by the popularity of this font smoothing choice in the crawl data, it certainly appears to be a problem for web developers and a better solution deserves some careful consideration.</p> <h2 id="generic-family-names"><a href="#generic-family-names" class="anchor-link">Generic family names</a></h2> <p>While system font families are not ideal from a design perspective, as universally available options they offer a useful fallback in case self-hosted or web fonts fail to load for some reason. They’re also a good alternative if you want to achieve a “native” look and feel for your web application, or if you have performance budget constraints and can’t use web fonts at all.</p> <figure id="fig-46"> <div class="figure-wrapper"> <a href="/static/images/2024/fonts/generic-family-name-usage.png" class=""> <img src="/static/images/2024/fonts/generic-family-name-usage.png" alt="Usage of generic font-family names." aria-labelledby="fig-46-caption" aria-describedby="fig-46-description" width="600" height="371" data-width="600" data-height="371" data-seamless="" data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vTHmcrit1gMzxfZNeFp9LrA4NQSMEh140fapD4CFQ89knpy6LvEKz7VafGaFGlxCAxTdpLZXaVaq8Pg/pubchart?oid=1077237634&format=interactive" loading="lazy"> </a> <div class="figure-dropdown nav-dropdown"> <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="Explore the results"> <span class="visually-hidden">Explore the results</span> <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" /> </svg> </button> <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden"> <li> <a href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/#gid=1543061572"> View data </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/development/styles_family_system.sql"> View query </a> </li> <li> <a href="/static/images/2024/fonts/generic-family-name-usage.png"> View image </a> </li> </ul> </div> </div> <button type="button" class="fig-description-button novisibility-until-js" aria-expanded="false" aria-controls="fig-46-description" data-show-text="Show description of Figure 4.46" data-hide-text="Hide description of Figure 4.46">Show description of Figure 4.46</button> <div id="fig-46-description" class="hidden">Column chart showing usage of the generic <code>font-family</code> names. The <code>sans-serif</code> generic family name is used on 89% of desktop and mobile pages, the <code>monospace</code> generic family names is used on 65% of desktop pages and 64% of mobile pages, the <code>serif</code> generic family name is used on 50% of desktop pages and 51% of mobile pages, the <code>system-ui</code> generic family name is used on 7% of desktop pages and 7% of mobile pages, the <code>cursive</code> generic family name is used on 3% of both desktop and mobile pages, the <code>ui-monospace</code> generic family name is used on 3% of desktop pages and 2% of mobile pages, the <code>ui-sans-serif</code> generic family name is used on 2% of both desktop and mobile pages.</div> <figcaption id="fig-46-caption"> <a href="#fig-46" class="anchor-link">Figure 4.46.</a> Usage of generic <code>font-family</code> names. </figcaption> </figure> <p>So, what are the most used generic family names on the web? Most used in 2024 were <code>sans-serif</code> at about 90%, <code>monospace</code> at 65%, and <code>serif</code> at 50%. These figures have been relatively consistent since 2022 for <code>sans-serif</code> and <code>monospace</code>, but mark a 7% decline for <code>serif</code> system fonts. While <code>system-ui</code> fonts were only represented on about 3.6% of desktop and mobile websites, it is now at 7.2%, roughly double what was seen in 2022. This is a clear indication that more and more people are using it to build apps whose typography matches the system.</p> <p>When it comes to system fonts, the greatest increase over the last two years registered for several generic families totaling less than 1% of cases (not pictured). Emoji system fonts, in particular, grew with something on the order of a thirteen-fold increase between 2022 and 2024. System fonts for math also showed a major increase despite a small overall footprint, growing from a little over 100 websites in the 2022 crawl to reach roughly 1,300 websites on desktop and mobile this year.</p> <h2 id="conclusion"><a href="#conclusion" class="anchor-link">Conclusion</a></h2> <p>Where are things going in the world of web typography? This year’s data highlights several promising trends in matters of performance. More developers are using the WOFF2 format, whose efficient compression offers better load times to handle font files that are growing in size. That’s great, but we would like to see more self-hosted fonts in the TrueType, OpenType, and WOFF formats converted to WOFF2. In most cases, this is a simple process that will significantly reduce file sizes and thus load times. Another area where there’s significant potential for performance gain is the use of resource hints. Currently only 11% of pages use resource hints to preload web fonts. We’d love to see that number go up significantly in the next couple of years as it requires very little effort (adding a simple <code><link rel="preload" href="..." as="font"></code> to your pages) and has a huge impact on web font performance.</p> <p>This year’s web font data also leads to several key insights. The rise in self-hosting rates and declining use of web font services seen in the 2022 data has largely stabilized for now. In the future, it will be interesting to observe whether these rates continue to plateau, or else begin to shift again in either direction. A major factor in future hosting decisions will be privacy regulations surrounding the use of web font services. Other factors may involve a tradeoff between performance and convenience for self-hosted fonts versus services.</p> <p>We also expect the use of new technologies like color fonts and variable fonts to continue rising in the coming years. As color fonts go, the <code>COLR</code> format is the clear winner due to its overall versatility, integration with variable fonts, and support for palettes in CSS. As for variable fonts, the trend toward designing for more axes, and implementing these in practice, is likely to continue proliferating as more designers and developers avail themselves of these technical affordances. Although variable fonts appear to have gained initial and impressive traction largely through CJK fonts, we expect the coming years to show increasing spread of variable fonts through other writing systems. Moreover, the continued development of new multi-script fonts is likely to continue increasing the typographic variety of global web design.</p> <p>What does the future hold for (web) fonts? We expect many incremental technical advancements, such as the addition of cubic Beziér curves to <code>glyf</code> outlines and breaking the 65k glyph limit in fonts. These and other changes to fonts are outlined in the so-called <a hreflang="en" href="https://github.com/harfbuzz/boring-expansion-spec">“Boring Expansion” specification</a>, whose aim it is to add support for various features to the OpenType font standard while mostly staying backwards compatible (hence the “boring” part). The recent development of <a hreflang="en" href="https://w3c.github.io/IFT/Overview.html">Incremental Font Transfer (IFT)</a> also promises considerable performance increases for web fonts, particularly ones with large character sets, as the user will only need to download the part of the font file that’s used on a particular website.</p> <p>Overall, observing the state of web fonts in 2024, we’re excited to see more and more support for various writing systems, and an increasing adoption of variable and color font technology. While there is still a lot of low-hanging fruit when it comes to web font performance, it is clear that developers are adopting technologies like WOFF2, resource hints, and <code>font-display</code> to improve the performance of their sites. We hope to see these trends continue in 2025!</p> </article> <div class="chapter-links"> <h2 id="explore-results"> <a href="#explore-results" class="anchor-link"> Explore the results </a> </h2> <a class="alt btn" hreflang="en" href="https://docs.google.com/spreadsheets/d/1EkdvJ8e0B9Rr42evC2Ds5Ekwq6gF9oLBW0BA5cmSUT4/"> <svg width="18" height="18" role="img" aria-hidden="true"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#bar-chart-logo"></use> </svg> View results </a> <a class="alt btn" hreflang="en" href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/2024/fonts/"> <svg width="18" height="18" role="img" aria-hidden="true"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sql-logo"></use> </svg> View queries </a> <a class="alt btn" hreflang="en" href="https://github.com/HTTPArchive/almanac.httparchive.org/issues/new?assignees=&labels=bug%2C+writing&title=Issue+with+the+2024+fonts+chapter"> <svg width="19" height="18" role="img" aria-hidden="true"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#github-logo"></use> </svg> Suggest edit </a> <a class="alt btn" hreflang="en" href="https://github.com/HTTPArchive/almanac.httparchive.org/issues/923/"> <svg width="18" height="18" role="img" aria-hidden="true"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#globe-logo"></use> </svg> Help translate </a> </div> <section class="webmentions js-enable hidden"> <div id="reactions" class="no-reactions"> <h2> <a href="#reactions" class="anchor-link">Reactions</a> </h2> <div class="reactions" data-source="View source"> <div class="reaction-tabs" role="tablist" aria-label="reactions"> <button id="likes-tab" role="tab" aria-selected="true" aria-controls="likes-panel" tabindex="0" class="no-reactions"> <span id="likes-count">0</span> <span id="likes-label" data-singular="like" data-plural="likes" data-plural-alt="">likes</span> </button> <button id="reposts-tab" role="tab" aria-selected="false" aria-controls="reposts-panel" tabindex="-1" class="no-reactions"> <span id="reposts-count">0</span> <span id="reposts-label" data-singular="repost" data-plural="reposts" data-plural-alt="">reposts</span> </button> <button id="replies-tab" role="tab" aria-selected="false" aria-controls="replies-panel" tabindex="-1" class="no-reactions"> <span id="replies-count">0</span> <span id="replies-label" data-singular="reply" data-plural="replies" data-plural-alt="">replies</span> </button> <button id="mentions-tab" role="tab" aria-selected="false" aria-controls="mentions-panel" tabindex="-1" class="no-reactions"> <span id="mentions-count">0</span> <span id="mentions-label" data-singular="mention" data-plural="mentions" data-plural-alt="">mentions</span> </button> </div> <div id="likes-panel" role="tabpanel" tabindex="0" aria-labelledby="likes-tab"> </div> <div id="reposts-panel" role="tabpanel" tabindex="0" aria-labelledby="reposts-tab" hidden> </div> <div id="replies-panel" role="tabpanel" tabindex="0" aria-labelledby="replies-tab" hidden> </div> <div id="mentions-panel" role="tabpanel" tabindex="0" aria-labelledby="mentions-tab" hidden> </div> </div> </div> </section> <section class="authors"> <h2 id="authors"> <a href="#authors" class="anchor-link"> Authors </a> </h2> <ul> <li> <div aria-hidden="true"> <a href="/en/2024/contributors#bramstein" tabindex="-1"> <img class="avatar" alt="Bram Stein avatar" src="https://avatars.githubusercontent.com/u/114871?v=4&s=200" height="200" width="200" loading="lazy"> </a> </div> <div class="info"> <a href="/en/2024/contributors#bramstein"><span class="name">Bram Stein</span></a> <div class="social"> <a class="mastodon" href="https://typo.social/@bram" aria-labelledby="author-bramstein-mastodon"> <svg width="22" height="22" role="img"> <title id="author-bramstein-mastodon">https://typo.social/@bram on Mastodon</title> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#mastodon-logo"></use> </svg> @https://typo.social/@bram </a> <a class="github" href="https://github.com/bramstein" aria-labelledby="author-bramstein-github"> <svg width="22" height="20"> <title id="author-bramstein-github">bramstein on GitHub</title> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#github-logo"></use> </svg> bramstein </a> <a class="linkedin" href="https://www.linkedin.com/in/bramstein/" aria-labelledby="author-bramstein-linkedin"> <svg width="22" height="22"> <title id="author-bramstein-linkedin">Bram Stein on LinkedIn</title> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#linkedin-logo"></use> </svg> bramstein </a> <a class="website" href="http://www.bramstein.com/" aria-labelledby="author-bramstein-website"> <svg width="22" height="22"> <title id="author-bramstein-website">Bram Stein website</title> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#globe-logo"></use> </svg> http://www.bramstein.com/ </a> </div> <div class="bio"> Bram Stein is CTO at <a hreflang="en" href="https://thetypefounders.com">The Type Founders</a>. Before that he was Head of Webfonts at <a hreflang="en" href="https://fonts.adobe.com">Adobe Fonts</a>. He is the author of the <a hreflang="en" href="https://abookapart.com/products/webfont-handbook">Webfont Handbook</a> and speaks about typography and web performance at conferences around the world. </div> </div> </li> <li> <div aria-hidden="true"> <a href="/en/2024/contributors#charlesberret" tabindex="-1"> <img class="avatar" alt="Charles Berret avatar" src="https://avatars.githubusercontent.com/u/3780812?v=4&s=200" height="200" width="200" loading="lazy"> </a> </div> <div class="info"> <a href="/en/2024/contributors#charlesberret"><span class="name">Charles Berret</span></a> <div class="social"> <a class="github" href="https://github.com/cberret" aria-labelledby="author-charlesberret-github"> <svg width="22" height="20"> <title id="author-charlesberret-github">cberret on GitHub</title> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#github-logo"></use> </svg> cberret </a> <a class="website" href="https://charlesberret.net/" aria-labelledby="author-charlesberret-website"> <svg width="22" height="22"> <title id="author-charlesberret-website">Charles Berret website</title> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#globe-logo"></use> </svg> https://charlesberret.net/ </a> </div> <div class="bio"> Charles Berret is a writer, interdisciplinary researcher, and data journalist who studies the history and philosophy of media and information technologies. </div> </div> </li> </ul> </section> <section class="citation-box"> <h2 id="cite"> <a href="#cite" class="anchor-link">Citation</a> </h2> <details> <summary>BibTeX</summary> <pre id="bibtex-citation"> @inbook{WebAlmanac.2024.Fonts, author = "Stein, Bram and Berret, Charles and Röttsches, Dominik and Lilley, Chris and Ukhov, Ivan and Solé, José and Quin, Liam and Michael, Mandy and Levien, Raph", title = "Fonts", booktitle = "The 2024 Web Almanac", chapter = 4, publisher = "HTTP Archive", year = "2024", language = "English", doi = "10.5281/zenodo.14065682", url = "https://almanac.httparchive.org/en/2024/fonts" }</pre> </details> </section> <div id="cta-container" class="invisible"> <a class="alt btn chapter-cta comment-cta webmentions-cta hidden" href="#reactions"> <svg width="22" height="22" role="img" aria-hidden="true"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#comment-logo"></use> </svg> <span class="num-reactions"></span> <span class="reactions-label" data-singular="reaction" data-plural="reactions" data-plural-alt="">Reactions</span> </a> <button class="alt btn chapter-cta share-cta hidden"> <svg width="22" height="22" role="img" aria-hidden="true" class="apple-icon hidden"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#share-apple-logo"></use> </svg> <svg width="22" height="22" role="img" aria-hidden="true" class="android-icon"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#share-android-logo"></use> </svg> Share </button> </div> <nav aria-label="Previous and next chapter navigation" id="chapter-navigation"> <a id="previous-chapter" title="Previous Chapter (press 'p' or ',')" href="/en/2024/structured-data"> <span class="arrow" aria-hidden="true">⌃</span> <span class="chapter-no"> Chapter 3 </span> <span class="chapter-title"> Structured Data </span> </a> <a id="next-chapter" title="Next Chapter (press 'n' or '.')" href="/en/2024/media"> <span class="arrow" aria-hidden="true">⌃</span> <span class="chapter-no"> Chapter 5 </span> <span class="chapter-title"> Media </span> </a> </nav> </div> </main> </div> <footer id="footer" class="alt-bg"> <div class="container"> <div class="home-logo"> <a class="navigation-logo" href="/en/2024/"> <span class="wa">Web Almanac</span> <span class="line-group"> <span class="pre">By</span> <span class="ha">HTTP Archive</span> </span> </a> </div> <hr> <nav id="footer-nav-items" aria-label="Footer navigation" class="nav-items"> <ul> <li><a href="/en/2024/contributors">Contributors</a></li> <li><a href="/en/2024/methodology">Methodology</a></li> <li> <a class="nav-dropdown-btn js-hide" href="/en/search">Search</a> <div class="nav-dropdown footer search-nav js-enable hidden"> <button type="button" class="nav-dropdown-btn search-button" aria-expanded="false"> Search </button> <ul class="nav-dropdown-list align-right hidden footer-search"> <li class="nav-dropdown-list-part"> <form action="/en/search"> <label for="footer-search-box" class="visually-hidden">Search</label> <input id="footer-search-box" class="search-input" type="search" name="q" placeholder="Search" title="Search" aria-label="Search"> <button class="search-button" type="submit"> <svg width="13" height="13" role="img" aria-labelledby="footer-search-icon"> <title id="footer-search-icon">Search</title> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#search-logo"></use> </svg> </button> </form> </li> </ul> </div> </li> <li> <a class="nav-dropdown-btn js-hide" href="/en/2024/table-of-contents">Table of Contents</a> <div class="nav-dropdown footer table-of-contents js-enable hidden"> <button type="button" class="nav-dropdown-btn" aria-expanded="false" aria-label="Table of Contents" > Table of Contents </button> <ul class="nav-dropdown-list hidden footer-list"> <li class="nav-dropdown-list-part"> <a href="/en/2024/">Home</a> </li> <li class="nav-dropdown-list-part"> <a href="/en/2024/table-of-contents">Table of Contents</a> </li> <li class="nav-dropdown-list-chapter foreword"> <a href="/en/2024/table-of-contents#foreword">Foreword</a> </li> <li class="nav-dropdown-list-part"> <a href="/en/2024/table-of-contents#part-1">Part I. Page Content</a> </li> <li class="nav-dropdown-list-chapter"> <span class="nav-dropdown-list-todo">Chapter 1: JavaScript</span> </li> <li class="nav-dropdown-list-chapter"> <a href="/en/2024/markup"> Chapter 2: Markup </a> </li> <li class="nav-dropdown-list-chapter"> <a href="/en/2024/structured-data"> Chapter 3: Structured Data </a> </li> <li class="nav-dropdown-list-chapter nav-dropdown-list-current"> <span> Chapter 4: Fonts </span> </li> <li class="nav-dropdown-list-chapter"> <a href="/en/2024/media"> Chapter 5: Media </a> </li> <li class="nav-dropdown-list-chapter"> <a href="/en/2024/third-parties"> Chapter 6: Third Parties </a> </li> <li class="nav-dropdown-list-part"> <a href="/en/2024/table-of-contents#part-2">Part II. User Experience</a> </li> <li class="nav-dropdown-list-chapter"> <a href="/en/2024/seo"> Chapter 7: SEO </a> </li> <li class="nav-dropdown-list-chapter"> <a href="/en/2024/accessibility"> Chapter 8: Accessibility </a> </li> <li class="nav-dropdown-list-chapter"> <a href="/en/2024/performance"> Chapter 9: Performance </a> </li> <li class="nav-dropdown-list-chapter"> <a href="/en/2024/privacy"> Chapter 10: Privacy </a> </li> <li class="nav-dropdown-list-chapter"> <a href="/en/2024/security"> Chapter 11: Security </a> </li> <li class="nav-dropdown-list-part"> <a href="/en/2024/table-of-contents#part-3">Part III. Content Publishing</a> </li> <li class="nav-dropdown-list-chapter"> <a href="/en/2024/cms"> Chapter 12: CMS </a> </li> <li class="nav-dropdown-list-chapter"> <a href="/en/2024/ecommerce"> Chapter 13: Ecommerce </a> </li> <li class="nav-dropdown-list-chapter"> <a href="/en/2024/jamstack"> Chapter 14: Jamstack </a> </li> <li class="nav-dropdown-list-chapter"> <a href="/en/2024/sustainability"> Chapter 15: Sustainability </a> </li> <li class="nav-dropdown-list-part"> <a href="/en/2024/table-of-contents#part-4">Part IV. Content Distribution</a> </li> <li class="nav-dropdown-list-chapter"> <a href="/en/2024/page-weight"> Chapter 16: Page Weight </a> </li> <li class="nav-dropdown-list-chapter"> <a href="/en/2024/cdn"> Chapter 17: CDN </a> </li> <li class="nav-dropdown-list-chapter"> <a href="/en/2024/http"> Chapter 18: HTTP </a> </li> <li class="nav-dropdown-list-chapter"> <a href="/en/2024/cookies"> Chapter 19: Cookies </a> </li> <li class="nav-dropdown-list-part"> <a href="/en/2024/table-of-contents#appendices">Appendices</a> </li> <li class="nav-dropdown-list-chapter"> <a href="/en/2024/methodology">Methodology</a> </li> <li class="nav-dropdown-list-chapter"> <a href="/en/2024/contributors">Contributors</a> </li> <li class="nav-dropdown-list-part"> <a href="/en/search">Search</a> </li> </ul> </div> </li> <li> <div class="nav-dropdown footer"> <button type="button" class="nav-dropdown-btn js-enable" disabled aria-expanded="false" aria-label="Year Switcher">2024</button> <ul class="nav-dropdown-list hidden footer-list"> <li> <a href="/en/2022/fonts">2022</a> </li> <li class="unsupported-year"> <a href="/en/2021/">2021 Home</a> </li> <li> <a href="/en/2020/fonts">2020</a> </li> <li> <a href="/en/2019/fonts">2019</a> </li> </ul> </div> </li> <li> <div class="nav-dropdown footer"> <button type="button" class="nav-dropdown-btn js-enable" disabled aria-expanded="false" aria-label="Language Switcher" >English</button> <ul class="nav-dropdown-list hidden footer-list"> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org/wiki/Translators'-Guide"><em>Help translate</em></a> </li> </ul> </div> </li> </ul> </nav> <nav id="mobile-footer-nav-items" aria-label="Footer navigation" class="nav-items"> <ul> <li><a href="/en/2024/contributors">Contributors</a></li> <li><a href="/en/2024/methodology">Methodology</a></li> <li> <form class="search-nav" action="/en/search"> <label for="mobile-footer-search-box" class="visually-hidden">Search</label> <input id="mobile-footer-search-box" class="search-input" type="search" name="q" placeholder="Search" title="Search" aria-label="Search"> <button class="search-button" type="submit"> <svg width="13" height="13" role="img" aria-labelledby="mobile-footer-search-icon"> <title id="mobile-footer-search-icon">Search</title> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#search-logo"></use> </svg> </button> </form> </li> <li> <a class="js-hide" href="/en/2024/table-of-contents">Table of Contents</a> <div class="table-of-contents-switcher js-enable hidden"> <label for="table-of-contents-switcher-mobile-footer" class="visually-hidden"> Table of Contents Switcher </label> <select id="table-of-contents-switcher-mobile-footer" data-label="toc-menu-mobile"> <option value="/en/2024/">Home</option> <option value="/en/2024/table-of-contents">Table of Contents</option> <option value="/en/2024/table-of-contents#foreword">Foreword</option> <option disabled> Chapter 1: JavaScript </option> <option value="/en/2024/markup"> Chapter 2: Markup </option> <option value="/en/2024/structured-data"> Chapter 3: Structured Data </option> <option disabled selected value="/en/2024/fonts"> Chapter 4: Fonts </option> <option value="/en/2024/media"> Chapter 5: Media </option> <option value="/en/2024/third-parties"> Chapter 6: Third Parties </option> <option value="/en/2024/seo"> Chapter 7: SEO </option> <option value="/en/2024/accessibility"> Chapter 8: Accessibility </option> <option value="/en/2024/performance"> Chapter 9: Performance </option> <option value="/en/2024/privacy"> Chapter 10: Privacy </option> <option value="/en/2024/security"> Chapter 11: Security </option> <option value="/en/2024/cms"> Chapter 12: CMS </option> <option value="/en/2024/ecommerce"> Chapter 13: Ecommerce </option> <option value="/en/2024/jamstack"> Chapter 14: Jamstack </option> <option value="/en/2024/sustainability"> Chapter 15: Sustainability </option> <option value="/en/2024/page-weight"> Chapter 16: Page Weight </option> <option value="/en/2024/cdn"> Chapter 17: CDN </option> <option value="/en/2024/http"> Chapter 18: HTTP </option> <option value="/en/2024/cookies"> Chapter 19: Cookies </option> <option value="/en/2024/methodology"> Methodology </option> <option value="/en/2024/contributors"> Contributors </option> <option value="/en/search"> Search </option> </select> </div> </li> <li> <div class="year-switcher js-show"> <label for="year-switcher-mobile-footer" class="visually-hidden">Year Switcher</label> <select id="year-switcher-mobile-footer"> <option selected="selected" value="/en/2024/fonts"> 2024 </option> <option value="/en/2022/fonts"> 2022 </option> <option value="/en/2021/"> 2021 Home </option> <option value="/en/2020/fonts"> 2020 </option> <option value="/en/2019/fonts"> 2019 </option> </select> </div> </li> <li> <div class="language-switcher js-show"> <label for="language-switcher-mobile-footer" class="visually-hidden">Language Switcher</label> <select id="language-switcher-mobile-footer"> <option selected="selected" lang="en" value="/en/2024/fonts"> English </option> <hr> <option value="https://github.com/HTTPArchive/almanac.httparchive.org/wiki/Translators'-Guide"> Help translate </option> </select> </div> </li> </ul> </nav> <div id="footer-mobile-social-media" class="mobile-ha-social-media"> <a class="ha-logo" href="https://httparchive.org/" aria-labelledby="httparchive-logo-footer-mobile"> <svg width="70" height="35" role="img"> <title id="httparchive-logo-footer-mobile">HTTP Archive home</title> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ha-logo"></use> </svg> </a> <ul class="social-media"> <li> <a href="https://x.com/HTTPArchive" aria-labelledby="twitter-logo-footer-mobile"> <svg width="20" height="20" role="img"> <title id="twitter-logo-footer-mobile">Twitter</title> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter-logo"></use> </svg> </a> </li> <li> <a href="https://bsky.app/profile/httparchive.org" aria-labelledby="bluesky-logo-footer-mobile"> <svg width="20" height="20" role="img"> <title id="bluesky-logo-footer-mobile">Bluesky</title> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#bluesky-logo"></use> </svg> </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org" rel="me" aria-labelledby="github-logo-footer-mobile"> <svg width="22" height="20" role="img"> <title id="github-logo-footer-mobile">GitHub</title> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#github-logo"></use> </svg> </a> </li> </ul> </div> <hr> <p class="copyright"> <span>© Web Almanac. Licensed under <a hreflang="en" href="https://github.com/HTTPArchive/almanac.httparchive.org/blob/main/LICENSE">Apache 2.0</a>.</span> <br> <a class="accessibility-statement" href="/en/accessibility-statement">Accessibility Statement</a> <span class="footer-bullet">&bullet;</span> <a class="rss-feed" href="/en/rss.xml">RSS Feed</a> </p> <a class="ha-logo not-mobile" href="https://httparchive.org/" aria-labelledby="ha-logo-footer"> <svg width="70" height="35" role="img"> <title id="ha-logo-footer">HTTP Archive home</title> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ha-logo"></use> </svg> </a> <ul class="social-media not-mobile"> <li> <a href="https://x.com/HTTPArchive" aria-labelledby="twitter-logo-footer"> <svg width="20" height="20" role="img"> <title id="twitter-logo-footer">Twitter</title> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter-logo"></use> </svg> </a> </li> <li> <a href="https://bsky.app/profile/httparchive.org" aria-labelledby="bluesky-logo-footer"> <svg width="20" height="20" role="img"> <title id="bluesky-logo-footer">Bluesky</title> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#bluesky-logo"></use> </svg> </a> </li> <li> <a href="https://github.com/HTTPArchive/almanac.httparchive.org" rel="me" aria-labelledby="github-logo-footer"> <svg width="22" height="20" role="img"> <title id="github-logo-footer">GitHub</title> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#github-logo"></use> </svg> </a> </li> </ul> </div> </footer> <script async src="/static/js/almanac.js?v=1830c897b7a91e8f3ba7a8c08e07540d" nonce="9uxeGxQp6In3_wKi7qsuROz2z_kWnCh9"></script> <script defer src="/static/js/webmentions.js?v=dbb31a967a22e06b6c1bb62d7a9ff9a0" nonce="9uxeGxQp6In3_wKi7qsuROz2z_kWnCh9"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=G-PQ5N2MZG5M" nonce="9uxeGxQp6In3_wKi7qsuROz2z_kWnCh9"></script> <link rel="preconnect" href="https://www.google-analytics.com"> <script defer src="/static/js/web-vitals.js?v=f6f30f40e7d014a2d38f1362c5eb6244" nonce="9uxeGxQp6In3_wKi7qsuROz2z_kWnCh9"></script> <script defer src="/static/js/send-web-vitals.js?v=b7224f484fe762e075d4838286ddb066" nonce="9uxeGxQp6In3_wKi7qsuROz2z_kWnCh9"></script> <script type="speculationrules" nonce="9uxeGxQp6In3_wKi7qsuROz2z_kWnCh9"> { "prerender": [ { "source": "document", "where": { "and": [ {"href_matches": "/*"}, {"not": {"href_matches": "/static/*"}} ] }, "eagerness": "moderate" } ] } </script> </body> </html>

CINXE.COM

Fonts | 2024 | The Web Almanac by HTTP Archive