From 17f12a7a22ad70375d8ce52ba2e02b27ac1db95a Mon Sep 17 00:00:00 2001 From: Barry Pollard Date: Sun, 10 Nov 2024 16:17:49 +0000 Subject: [PATCH] Smart quotes --- src/content/en/2024/fonts.md | 134 +++++++++++++++++------------------ 1 file changed, 67 insertions(+), 67 deletions(-) diff --git a/src/content/en/2024/fonts.md b/src/content/en/2024/fonts.md index 28e08d2f8bd..3de6bcbde64 100644 --- a/src/content/en/2024/fonts.md +++ b/src/content/en/2024/fonts.md @@ -21,9 +21,9 @@ featured_stat_label_3: Percentage of pages using variable fonts. ## Introduction -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. +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. -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. +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. {{ figure_markup( image="webfont-usage.png", @@ -35,27 +35,27 @@ This year’s HTTP Almanac web crawl found that web font usage continues to grow ) }} -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. +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. -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. +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. 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. 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. -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 [2022 edition](../2022/fonts). In several cases, we also include 2023 data when it’s available and relevant. +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 [2022 edition](../2022/fonts). In several cases, we also include 2023 data when it's available and relevant. When we present percentages throughout the chapter, it is important to pay close attention to _what_ is actually counted in each specific case and _how_ 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: -- **Web Pages:** This method follows the [Almanac’s methodology](https://almanac.httparchive.org/en/2024/methodology) and counts the number of root pages. +- **Web Pages:** This method follows the [Almanac's methodology](https://almanac.httparchive.org/en/2024/methodology) and counts the number of root pages. - **Font Requests:** 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. - **Font Files:** 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. ## Hosting and services -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 [Google Fonts](https://fonts.google.com/) or a paid one like [Adobe Fonts](https://fonts.adobe.com/). 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. +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 [Google Fonts](https://fonts.google.com/) or a paid one like [Adobe Fonts](https://fonts.adobe.com/). 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. -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). +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). {{ figure_markup( image="hosting-type.png", @@ -141,7 +141,7 @@ Overall, the trend is clear: more and more people prefer to self-host their web ## File formats -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. +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. {{ figure_markup( image="popular-mime-types.png", @@ -153,9 +153,9 @@ Which font formats are found most often on the web? WOFF2 is by far the most pop ) }} -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 `application/octet-stream`, an incorrect MIME type. Looking at the data, the main "self-hosted" hosts serving incorrect mime types for fonts are two incorrectly configured CDNs: [cdnjs](https://cdnjs.com/) and [Wix](https://www.wix.com/). +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 `application/octet-stream`, an incorrect MIME type. Looking at the data, the main "self-hosted" hosts serving incorrect mime types for fonts are two incorrectly configured CDNs: [cdnjs](https://cdnjs.com/) and [Wix](https://www.wix.com/). -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. +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. {{ figure_markup( image="popular-mime-types-self-hosted.png", @@ -167,7 +167,7 @@ While these are useful insights into the global state of web font formats, the g ) }} -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). +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). ## File sizes @@ -183,7 +183,7 @@ The average size of web fonts has risen for most websites on desktop and mobile ) }} -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. +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. {{ figure_markup( image="woff2-font-sizes.png", @@ -219,7 +219,7 @@ Looking at the difference between WOFF2 file sizes for self-hosted sites versus ) }} -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. +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. 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. @@ -294,7 +294,7 @@ Digging down even further, we can take a look at the individual table sizes used -Because it contains the actual glyph outlines, `glyf` remains the table with the highest impact. However, there have been some noticeable changes in the order of the tables compared to 2022. `GPOS` (Glyph Positioning, which controls the placement of glyphs) has overtaken `CFF` (Compact Font Format, which is an alternative to `glyf`). 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 `kern` table has dropped out of the top 10 as it is replaced by the more modern kerning implementation in the `GPOS` table. +Because it contains the actual glyph outlines, `glyf` remains the table with the highest impact. However, there have been some noticeable changes in the order of the tables compared to 2022. `GPOS` (Glyph Positioning, which controls the placement of glyphs) has overtaken `CFF` (Compact Font Format, which is an alternative to `glyf`). 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 `kern` table has dropped out of the top 10 as it is replaced by the more modern kerning implementation in the `GPOS` table. The `post` and `name` 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 `post` and `name` mostly contain unnecessary data for web fonts (unless a web app allows users to add web fonts to its font menu). @@ -340,11 +340,11 @@ There are some efforts underway to [add cubic Bézier curves to `glyf`](https:// ## Resource hints -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. +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. There are three types of resource hints relevant for web fonts, each with its own level of impact. The `preload` 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 `preconnect` 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 `dns-prefetch` 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. -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 `dns-prefetch` and `preconnect` 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 `preload`, we are measuring when the hint has an `as` attribute with value `font`. +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 `dns-prefetch` and `preconnect` 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 `preload`, we are measuring when the hint has an `as` attribute with value `font`. {{ figure_markup( image="font-resource-hint-usage.png", @@ -356,9 +356,9 @@ We made some changes in the data gathered on resource hints for this year’s Al ) }} -In this year’s data, `preconnect` and `dns-prefetch` are used to speed up connecting to web font services at 18% and 16% respectively. The most effective resource hint, `preload`,is only used on 11% of pages. We’d like to see this number go up by a lot, as using the `preload` 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 `preload`, for example if you use a service that does not provide stable font URLs. In those cases, it is best to use `preconnect` or `dns-prefetch` hints. +In this year's data, `preconnect` and `dns-prefetch` are used to speed up connecting to web font services at 18% and 16% respectively. The most effective resource hint, `preload`,is only used on 11% of pages. We'd like to see this number go up by a lot, as using the `preload` 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 `preload`, for example if you use a service that does not provide stable font URLs. In those cases, it is best to use `preconnect` or `dns-prefetch` hints. -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. +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. ## Font display @@ -374,9 +374,9 @@ The `font-display` descriptor for the `@font-face` CSS directive allows develope ) }} -The use of `swap` for `font-display` 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 `swap` 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). +The use of `swap` for `font-display` 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 `swap` 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). -Meanwhile, the bad news is that this year’s crawl also shows increasing use of `block` for `font-display`, 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 `block`, most websites should use `swap`, `fallback`, or `optional`. The rising use of `block` (24% desktop, 23% mobile) continues a trend from 2022, when it overtook `auto` as the second most common value chosen when using the `font-display` descriptor. The `auto` value itself is now used on 9% of websites, while `fallback` is used on 3%. The `optional` and `normal` values were used with `font-display` on less than 1% of websites. +Meanwhile, the bad news is that this year's crawl also shows increasing use of `block` for `font-display`, 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 `block`, most websites should use `swap`, `fallback`, or `optional`. The rising use of `block` (24% desktop, 23% mobile) continues a trend from 2022, when it overtook `auto` as the second most common value chosen when using the `font-display` descriptor. The `auto` value itself is now used on 9% of websites, while `fallback` is used on 3%. The `optional` and `normal` values were used with `font-display` on less than 1% of websites. We think the rise of `block` usage is concerning so we decided to investigate a bit further. Looking at the top 10 `@font-face` rules using `font-display: block` reveals an interesting discovery: all of the top 10 fonts are icon fonts! @@ -453,7 +453,7 @@ We think the rise of `block` usage is concerning so we decided to investigate a 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 `font-display: block`. 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. -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 `font-display: swap` of course). +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 `font-display: swap` of course). ## Families and foundries @@ -721,7 +721,7 @@ The top 10 for self-hosted fonts contains very few surprises. As we saw earlier, -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 [Writing systems](#writing-systems) section). +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 [Writing systems](#writing-systems) section).
@@ -783,7 +783,7 @@ There is a close match between the top 10 most popular families from Google Font -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 [Mark Simonson Studio](https://www.marksimonson.com/fonts/view/proxima-nova) (Proxima Nova), [Paratype](https://www.paratype.com/fonts/pt/futura-pt) (Futura PT), [HvD fonts](https://www.hvdfonts.com/fonts/brandon-grotesque) (Brandon Grotesque), [MoTyFo](https://www.motyfo.com/font-family/sofia-pro/) (Sofia Pro), [Dalton Maag](https://www.daltonmaag.com/font-library/aktiv-grotesk.html) (Aktiv Grotesk), [EuropaType](https://europatype.com/) (Europa), [The Freight Collection](https://freightcollection.com/) (Freight Sans), and [exljbris](https://www.exljbris.com/museosans.html) (Museo Sans). +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 [Mark Simonson Studio](https://www.marksimonson.com/fonts/view/proxima-nova) (Proxima Nova), [Paratype](https://www.paratype.com/fonts/pt/futura-pt) (Futura PT), [HvD fonts](https://www.hvdfonts.com/fonts/brandon-grotesque) (Brandon Grotesque), [MoTyFo](https://www.motyfo.com/font-family/sofia-pro/) (Sofia Pro), [Dalton Maag](https://www.daltonmaag.com/font-library/aktiv-grotesk.html) (Aktiv Grotesk), [EuropaType](https://europatype.com/) (Europa), [The Freight Collection](https://freightcollection.com/) (Freight Sans), and [exljbris](https://www.exljbris.com/museosans.html) (Museo Sans).
@@ -845,15 +845,15 @@ The Adobe Fonts top 10 list is quite distinct from the other top lists because i -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! +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! ## Writing systems -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. +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. -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. +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. -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. +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. {{ figure_markup( image="writing-systems.png", @@ -867,21 +867,21 @@ To give a sense of where these increases have been most consequential, it helps ) }} -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. +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. 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. -A recent technical development called [Incremental Font Transfer](https://www.w3.org/TR/2024/WD-IFT-20240709/) (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. +A recent technical development called [Incremental Font Transfer](https://www.w3.org/TR/2024/WD-IFT-20240709/) (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. -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. +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. -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 _used_ for that script, it just means it _supports_ that script. +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 _used_ for that script, it just means it _supports_ that script. -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. +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. -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. +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. -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). +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). 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). @@ -945,9 +945,9 @@ The top 10 list for Arabic contains primarily fonts that were either designed ex -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. +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. -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. +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.
@@ -1071,7 +1071,7 @@ For Korean, Pretendard is listed as the most commonly used font, with various No -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! +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!
@@ -1195,11 +1195,11 @@ Unfortunately, the data for top Chinese language fonts seems to be unreliable. T -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 [Incremental Font Transfer standard](https://www.w3.org/TR/2024/WD-IFT-20240709/) will definitely help and we hope to see more Chinese fonts in the coming years (and many other writing systems!). +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 [Incremental Font Transfer standard](https://www.w3.org/TR/2024/WD-IFT-20240709/) will definitely help and we hope to see more Chinese fonts in the coming years (and many other writing systems!). ## OpenType features -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. +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. {{ figure_markup( content="55%", @@ -1209,7 +1209,7 @@ OpenType features are one of the “hidden” gems in the OpenType format. Some sql_file="development/fonts_feature.sql", ) }} -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 (`liga`) support up from 10% to 40%, kerning (`kern`) from 13% to 38%, localized forms (`locl`) from 10% to 27%, fractions (`frac`) from 8% to 26%, numerator (`numr`) from 7% to 19%, and denominator (`dnom`) from 7% to 19%. +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 (`liga`) support up from 10% to 40%, kerning (`kern`) from 13% to 38%, localized forms (`locl`) from 10% to 27%, fractions (`frac`) from 8% to 26%, numerator (`numr`) from 7% to 19%, and denominator (`dnom`) from 7% to 19%. {{ figure_markup( image="opentype-feature-support-fonts.png", @@ -1221,9 +1221,9 @@ The prevalence of OpenType features has risen steadily in recent years, reaching ) }} -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 (`aalt`, which provides multiple versions of a given character), ordinals (`ordn`, which provides ordinal numbers), and character composition (`ccmp`, which provides special character combinations) have each risen from about 1% to 3% support in fonts used for both desktop and mobile websites. +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 (`aalt`, which provides multiple versions of a given character), ordinals (`ordn`, which provides ordinal numbers), and character composition (`ccmp`, which provides special character combinations) have each risen from about 1% to 3% support in fonts used for both desktop and mobile websites. -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: `font-variant` (and its various longhand properties that make it up) and the lower-level `font-feature-settings`. The `font-variant` property is used to select from a set of predefined font variants, such as small caps (`small-caps`). The `font-feature-settings` property should primarily be used when there is no `font-variant` equivalent. +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: `font-variant` (and its various longhand properties that make it up) and the lower-level `font-feature-settings`. The `font-variant` property is used to select from a set of predefined font variants, such as small caps (`small-caps`). The `font-feature-settings` property should primarily be used when there is no `font-variant` equivalent. {{ figure_markup( image="opentype-features-low-level-vs-high-level-properties.png", @@ -1249,15 +1249,15 @@ This point is driven home if we take a look at the features used in combination ) }} -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 `font-feature-settings`. 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 `font-feature-settings`. You can achieve expert-level typesetting with the `font-variant` properties alone. +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 `font-feature-settings`. 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 `font-feature-settings`. You can achieve expert-level typesetting with the `font-variant` properties alone. ## Variable fonts -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? +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? 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 (`wght`) axis. Likewise, tweaking the width (`wdth`) 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. -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. +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. {{ figure_markup( image="variable-font-usage-over-time.png", @@ -1271,7 +1271,7 @@ In addition to giving designers and end-users more typographic expressiveness, v 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. -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. +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.
@@ -1344,7 +1344,7 @@ As an aside, usage doesn’t necessarily imply that a web developer chose to use -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. +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. 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. @@ -1358,7 +1358,7 @@ Open Sans was the second most popular variable font this year, being found on 16 ) }} -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. +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. Like color fonts, variable fonts also have two competing outline formats: the variable extensions of the `glyf` format and Compact Font Format 2 (`CFF2`). The main technical differences between the `glyf` format and `CFF2` are the types of Bézier curves, more automated hinting, and (perhaps most importantly) the companies backing them. `CFF2` is backed by Adobe and `glyf` by all other major contributors to the OpenType specification (Google, Microsoft, and Apple). @@ -1370,7 +1370,7 @@ Like color fonts, variable fonts also have two competing outline formats: the va sql_file="development/fonts_variable_format.sql", ) }} -Unfortunately for Adobe, over 99% of the outlines used for variable fonts this year were in the `glyf` format. This overwhelming share for `glyf` outlines has been fairly consistent since 2022, dropping only 0.2 percentage points in the intervening two years. Since variable fonts introduction in 2016, `CFF2` has only accumulated a miniscule 0.6% of usage. Usage of `CFF2` just doesn’t seem to be picking up and it’s worth wondering if efforts are not better spent elsewhere. +Unfortunately for Adobe, over 99% of the outlines used for variable fonts this year were in the `glyf` format. This overwhelming share for `glyf` outlines has been fairly consistent since 2022, dropping only 0.2 percentage points in the intervening two years. Since variable fonts introduction in 2016, `CFF2` has only accumulated a miniscule 0.6% of usage. Usage of `CFF2` just doesn't seem to be picking up and it's worth wondering if efforts are not better spent elsewhere. For now, our recommendation is the same as in 2022: _avoid `CFF2` based variable fonts_ because browser and operating system support is still patchy (and there is a perfectly viable alternative in `glyf`). @@ -1388,7 +1388,7 @@ In order to get a sense of how type designers are approaching the technical affo 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 `font-variation-settings` property or through the good old `font-weight`, `font-stretch`, and `font-style` properties that have been updated to support variable fonts. -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 `font-variation-settings` as an approximation (so take these results with a grain of salt). +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 `font-variation-settings` as an approximation (so take these results with a grain of salt). {{ figure_markup( image="font-variation-axes.png", @@ -1400,9 +1400,9 @@ It’s difficult to detect usage of variable fonts with the standard font proper ) }} -The weight axis (`wght`) 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 `font-weight` property for setting variable font weight axis values. At the same time, we see an increase in most other “standard” axes: `opsz` (optical size), `wdth` (width), `slnt` (slant), and `ital` (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. +The weight axis (`wght`) 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 `font-weight` property for setting variable font weight axis values. At the same time, we see an increase in most other "standard" axes: `opsz` (optical size), `wdth` (width), `slnt` (slant), and `ital` (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. -It’s also good to see growing use of several non-standard axes (`FILL`, `GRAD` or grade, and `SOFT`) which do not have CSS properties to control them. The only way to use these axes is through the `font-variation-settings` 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). +It's also good to see growing use of several non-standard axes (`FILL`, `GRAD` or grade, and `SOFT`) which do not have CSS properties to control them. The only way to use these axes is through the `font-variation-settings` 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). 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. @@ -1419,7 +1419,7 @@ Color fonts, also known as chromatic fonts, offer the capacity to display letter ) }} -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. +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. {{ figure_markup( image="color-font-usage-over-time.png", @@ -1445,7 +1445,7 @@ As a relatively new technology, color font use is split between several competin The two raster-based color font formats, SBIX (Sbit Binary Image eXtension, lowercased as an OpenType table) and `CBDT`, were found on a small but notable share of websites using this technology. SBIX accounted for 13% of desktop, while `CBDT` files made up 3% of desktop color fonts. -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. +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.
@@ -1520,7 +1520,7 @@ The most popular color font families this year were Noto Color Emoji (25% deskto 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 `COLR`, `CBDT` (raster), and an `SVG` version. The `COLR` version is the most popular, followed by `CBDT`, and finally `SVG`. -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 `SVG` from 82% in 2022 to 53% in 2024. Both `COLRv0` and `COLRv1` saw a steady increase in use in 2023 and 2024. The combined use of `COLRv0` and `COLRv1` 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 `SVG` declines in popularity. +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 `SVG` from 82% in 2022 to 53% in 2024. Both `COLRv0` and `COLRv1` saw a steady increase in use in 2023 and 2024. The combined use of `COLRv0` and `COLRv1` 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 `SVG` declines in popularity. {{ figure_markup( image="color-font-format-usage-over-time.png", @@ -1532,11 +1532,11 @@ Given the relatively small number of websites with color fonts, usage trends ove ) }} -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 [Toss Face Font](https://toss.im/tossface), 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 `COLR` format. In fact, the homepage for Toss Face Font is using a simplified `COLRv0` font, which, sadly, does not appear to be publicly available. The `COLRv0` version weighs in at 6 MB uncompressed and 1.1 MB compressed (WOFF2). While it may be hard to create a `COLRv1` version with the same fidelity as the SBIX version, the `COLRv0` version demonstrates the benefits of conversion to a vector format in terms of file size reduction. We hope the `COLRv0` version is soon made available to the public, and this sudden rise in SBIX usage is a temporary blip. +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 [Toss Face Font](https://toss.im/tossface), 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 `COLR` format. In fact, the homepage for Toss Face Font is using a simplified `COLRv0` font, which, sadly, does not appear to be publicly available. The `COLRv0` version weighs in at 6 MB uncompressed and 1.1 MB compressed (WOFF2). While it may be hard to create a `COLRv1` version with the same fidelity as the SBIX version, the `COLRv0` version demonstrates the benefits of conversion to a vector format in terms of file size reduction. We hope the `COLRv0` version is soon made available to the public, and this sudden rise in SBIX usage is a temporary blip. -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. +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. -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 `SVG`, 貂明朝 (Ten Mincho), 貂明朝テキスト (Ten Mincho Text), and Source Code Pro make up a combined 41% of `SVG` 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 `SVG` to roughly 5%! While the `COLR` formats also have some fonts with a low percentage of color glyphs, that percentage is much lower at 3-4%, reducing the `COLRv0` share to 25.1% and 7.2% for `COLRv1`. This would make `COLR` the most popular format by far! +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 `SVG`, 貂明朝 (Ten Mincho), 貂明朝テキスト (Ten Mincho Text), and Source Code Pro make up a combined 41% of `SVG` 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 `SVG` to roughly 5%! While the `COLR` formats also have some fonts with a low percentage of color glyphs, that percentage is much lower at 3-4%, reducing the `COLRv0` share to 25.1% and 7.2% for `COLRv1`. This would make `COLR` the most popular format by far! {{ figure_markup( image="color-font-formats.png", @@ -1548,13 +1548,13 @@ It’s worth noting a point of complexity in the data gathered on color fonts. O ) }} -We plan to refine our analysis of color fonts in future editions of the Almanac, but our expectation is that `COLR` usage will continue to grow and it will soon become the dominant color font format (if it isn’t already). +We plan to refine our analysis of color fonts in future editions of the Almanac, but our expectation is that `COLR` usage will continue to grow and it will soon become the dominant color font format (if it isn't already).

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 `SVG` table, even though the font does not contain any color glyphs. This erroneously caused the popularity of `SVG` to be inflated. We have corrected this in 2024 and included the 2022 and 2023 data for comparison.

## Font smoothing -The [non-standard CSS font smoothing properties](https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth) 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: `-webkit-font-smoothing` and `-moz-osx-font-smoothing`. Theoretically they allow web developers to switch between grayscale and subpixel antialiasing on Apple’s MacOS only. That’s interesting because in 2018, [Apple removed subpixel antialiasing from MacOS](https://en.wikipedia.org/wiki/MacOS_Mojave#Removed_features) with the release of Mojave. Even more interesting, more than about 70-77% of all websites set this property to `antialiased` or `grayscale`. +The [non-standard CSS font smoothing properties](https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth) 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: `-webkit-font-smoothing` and `-moz-osx-font-smoothing`. Theoretically they allow web developers to switch between grayscale and subpixel antialiasing on Apple's MacOS only. That's interesting because in 2018, [Apple removed subpixel antialiasing from MacOS](https://en.wikipedia.org/wiki/MacOS_Mojave#Removed_features) with the release of Mojave. Even more interesting, more than about 70-77% of all websites set this property to `antialiased` or `grayscale`. {{ figure_markup( image="font-smoothing-usage.png", @@ -1570,11 +1570,11 @@ So what is going on here? Why is everyone setting this property if MacOS uses gr 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 `-webkit-font-smoothing: antialiased` (and its `-moz` equivalent) disables this stem darkening and makes the font appear a little lighter, especially on darker backgrounds. -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 `font-smoothing` 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. +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 `font-smoothing` 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. ## Generic family names -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. +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. {{ figure_markup( image="generic-family-name-usage.png", @@ -1592,12 +1592,12 @@ When it comes to system fonts, the greatest increase over the last two years reg ## Conclusion -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 `` to your pages) and has a huge impact on web font performance. +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 `` to your pages) and has a huge impact on web font performance. -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. +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. 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 `COLR` 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. -What does the future hold for (web) fonts? We expect many incremental technical advancements, such as the addition of cubic Beziér curves to `glyf` outlines and breaking the 65k glyph limit in fonts. These and other changes to fonts are outlined in the so-called [“Boring Expansion” specification](https://github.com/harfbuzz/boring-expansion-spec), 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 [Incremental Font Transfer (IFT)](https://w3c.github.io/IFT/Overview.html) 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. +What does the future hold for (web) fonts? We expect many incremental technical advancements, such as the addition of cubic Beziér curves to `glyf` outlines and breaking the 65k glyph limit in fonts. These and other changes to fonts are outlined in the so-called ["Boring Expansion" specification](https://github.com/harfbuzz/boring-expansion-spec), 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 [Incremental Font Transfer (IFT)](https://w3c.github.io/IFT/Overview.html) 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. -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 `font-display` to improve the performance of their sites. We hope to see these trends continue in 2025! +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 `font-display` to improve the performance of their sites. We hope to see these trends continue in 2025!