Almanac.httparchive.org: Fonts 2020

[obto]

Part I Chapter 4: Fonts

Content team

| Authors | Reviewers | Analysts | Draft | Queries | Results |
| ------- | --------- | -------- | ----- | ------- | ------- |
| @jpamental @davelab6 | @malchata @RoelN @notwaldorf @mandymichael @svgeesus @rsheeter | @AbbyTsai | Doc | *.sql | Sheet |

Content team lead: @jpamental

Welcome chapter contributors! You'll be using this issue throughout the chapter lifecycle to coordinate on the content planning, analysis, and writing stages.

The content team is made up of the following contributors:

• Authors
• Reviewers
• Analysts

New contributors: If you're interested in joining the content team for this chapter, just leave a comment below and the content team lead will loop you in.

_Note: To ensure that you get notifications when tagged, you must be "watching" this repository._

Milestones

0. Form the content team

• [x] Jul 6th: Project owners have selected an author to be the content team lead
• [x] Jul 13th: The content team has at least one author, reviewer, and analyst (minimally viable team formed)

1. Plan content

• [x] Jul 20th: The content team has completed the chapter outline in the draft doc
• [x] Jul 27th: Analysts have triaged the feasibility of all proposed metrics

2. Gather data

• [x] Jul 27th: Analysts have added all necessary custom metrics and drafted a PR to track query progress
• Aug 1 - 31: August crawl
• [x] Sep 7th: Analysts have queried all metrics and saved the output to the results sheet

3. Validate results

• [ ] Sep 14th: The content team has reviewed the results sheet

4. Draft content

• [ ] Nov 12th: Authors have completed the first draft in the doc
• [ ] Nov 26th: The content team has prototyped all data visualizations

5. Publication

• [ ] Nov 26th: The content team has reviewed the final draft, converted to markdown, and filed a PR to add it to the 2020 content directory
• Dec 9th: Target launch date

[zachleat]

If @RoelN has bandwidth he would be an excellent author here

[rviscomi]

Thanks @zachleat! Would you also be interested in being a peer reviewer this year?

@RoelN any interest in taking on this chapter or recommendations for other good candidates?

[bazzadp]

@mandymichael and @jpamental do great things in the variable fonts space and would love to have either (or both) of them contribute if interested.

[malchata]

I'd be happy to work on this in a review or even author capacity, depending on the need. There's a lot of talent already teed up for this space, but let me know if I can help.

[RoelN]

Thanks very much for considering me! 💖 I'd love to, but I'd also be happy to give up (or share) my seat if this means a more diverse mix of authors. :-)

[jpamental]

I'll say the same as @malchata & @RoelN - I'd love to contribute in any way, as long as it doesn't preclude more diverse voices from being heard!

[rviscomi]

@mandymichael @notwaldorf would either of you have any interest in authoring this chapter?

[rviscomi]

@malchata @RoelN @jpamental thanks for your consideration. I'll put you all down as reviewers for now and we can change it to authors as needed.

[notwaldorf]

I haven't authored anything in a while, so I would love to do a co-authoring adventure (or, if someone tells me _specifically_ what to write about, i can try that too). I wouldn't want to take anything about variable fonts away from @mandymichael though :)

[rviscomi]

Great, thanks @notwaldorf! I've added you as an author for this chapter. Can I also put you down as the content team lead? You'd be the point person for keeping the chapter on schedule. You're also free to add people as coauthors as needed.

A few resources to get you started:

• the draft doc is where the content team will plan and draft the chapter
• last year's chapter for reference
• and the project methodology to give you an idea of the possibilities/limitations of the dataset

[notwaldorf]

Ooooh that sounds like a lot of responsibility and self-organization that I'm not really sure I can be successful at (I proposed a co-authoring adventure with structure and unless I copy paste last year's, it feels like a solo-authoring adventure and chaos 😅 )

[rviscomi]

No worries! It's great to have you on board in a coauthor capacity.

📟 @malchata @RoelN @jpamental @mandymichael would any of you like to step into the content lead role and coauthor with Monica?

[LeaVerou]

I'm the content lead for the CSS chapter and we were wondering if we can study variable fonts usage or it would be more suitable here. Seemed like a good idea to ask you folks so we can coordinate.

I would also nominate @svgeesus as a co-author or reviewer, if nominations are not closed!

[paulcalvano]

Hi @LeaVerou. You should be able to study variable fonts. There was a section on it in the 2019 Fonts chapter, so there are some existing queries we can work with. https://almanac.httparchive.org/en/2019/fonts#variable-fonts-are-the-future

Example queries:

• https://github.com/HTTPArchive/almanac.httparchive.org/blob/main/sql/2019/06_Fonts/06_18.sql
• https://github.com/HTTPArchive/almanac.httparchive.org/blob/main/sql/2019/06_Fonts/06_21.sql

[RoelN]

This is so exciting :-)

@LeaVerou I think there will be some overlap between CSS and Fonts if you look at the typography side of fonts (as opposed to tech/performance), but I think that'd eventually might feel better at home in the Fonts chapter. Because it'll be a mix of what the browser automatically does, based on the font, and what the CSS authors enable/disable on top of that.

For instance, you could take a look at how many OpenType features are present in fonts (this query implies we can look into that, I hope!), and which ones will be enabled by browser by default, and which ones are actively turned on in CSS.

Not sure this is the place, but here's some initial notes I took, maybe this helps with brainstorming:

- How many optional OpenType features are enabled in CSS?
  - Gives insights in how much enhanced/fancy/non-standard typographic features are used, e.g. tabular figures
  - And how much of it is actually used, and how much is served unused?
  - How many OpenType features are in the fonts anyway?
  - Are "intelligent" fonts being used, that adapt to the screen via mandatory OT features? E.g. `locl`
- How many variable fonts with `opsz` axes are being used?
  - This axes gets used by the browser automatically, making the overall type nicer.
- How many variable fonts are out there
  - And how much of their potential is used? E.g. full width range, or still "regular and bold"?

Edit: I'd be more than happy in a role as reviewer or what-to-write-about-helperouter.

[notwaldorf]

Then, since it's looking like this might be of interest to the CSS folks, i'm 100% ok with bailing and/or just reviewing, and giving my spot to @svgeesus!

[jpamental]

I'd love to be part of the team (content lead if that's needed), ideally co-authoring with you @notwaldorf and maybe @mandymichael ? I think with input from @LeaVerou and @svgeesus it would be a really well-rounded group including perspectives from fonts, design, development, and CSS. It would be wonderful to work with you and Mandy.

[rviscomi]

Ok thanks everyone, I've set @jpamental as the team lead and coauthor along with @notwaldorf, supported by @malchata and @RoelN as reviewers. This is totally flexible, so feel free to reassign as needed, but it's good to have something firmed up to get started on content planning.

@mandymichael @svgeesus @LeaVerou let us know if you're interested in contributing, either as coauthors or reviewers, it'd be great to have you!

Here's your draft doc where you should do all of the planning/writing. I don't have everyone's email address, so click "request edit access" to be able to edit/comment, and write your name/email in the Content Team section so people can @ your email in the comments to notify you.

[LeaVerou]

Thank you for the invitation @rviscomi! I don't think I have enough expertise on fonts to contribute, and I have my hands very full with the CSS chapter.

[obto]

Hey @jpamental, just checking in:

1. How is the the chapter coming along? We're tying to have the outline and metrics settled on by the end of the week so we have time to configure the Web Crawler to track everything you need.
2. Anything you need from me to keep things moving forward?

[mandymichael]

Yikes, I just saw this, happy to help, however, but looks like you are all good! Apologies I haven't been checking github much.

[rviscomi]

@mandymichael glad to hear you're interested! I'm sure there's still room for you to contribute. We you thinking of coauthoring or reviewing?

[davelab6]

I'd like to volunteer as a coauthor :)

[mandymichael]

@mandymichael glad to hear you're interested! I'm sure there's still room for you to contribute. We you thinking of coauthoring or reviewing?

I have never coauthored before so I'd be happy to review :)

[svgeesus]

I somewhat have my hands full as co-author on the CSS chapter, but there is of course a fair bit of overlap between CSS and Fonts and I am interested in both. How about as reviewer?

[svgeesus]

I would be interested to see what percentage of websites use webfonts, (yes, super high globally) sorted by either language, or country. This is because CJK languages (Chinese, Japanese, Korean) need much larger webfonts. But I have not seen good data on whether this means they are not using webfonts _at all_, or are using them a little, or what.

[rviscomi]

@notwaldorf @mandymichael @svgeesus thank you all for your interest, I've added you three as reviewers.
@davelab6 it's great to have you as a coauthor!

@svgeesus your last question sounds similar to some research I did last year, which might be useful for this chapter: https://discuss.httparchive.org/t/how-does-web-font-usage-vary-by-country/1649. Also font related: https://discuss.httparchive.org/t/what-are-the-most-and-least-popular-numeric-font-weight-values/1732.

@tjmonsi would you be interested in joining the Fonts chapter team as an analyst again this year?

[bazzadp]

Hey all! Another stat to consider: We were chatting recently on the Web Performance slack about the use of the likes of Google Fonts and the 2019 chapter doesn't make it exactly clear what percentage of sites actually use that. It says that 75% of web fonts are Google Fonts for example, but no indication if that also means 75% of web sites use that, or if some sites use 10 different web fonts and some none, so the % of sites is much smaller. Would be nice to include that stat this year.

[obto]

@jpamental A lot of great conversation going on here which is awesome, but the official chapter doc could use some love. Think we can have the outline wrapped up by the end of the week so we have time to set up our Web Crawler?

[jpamental]

Hi @obto - I'll do my best! I've been a bit swamped this week but will dig into what's there and what was done last year as soon as I can. It might spill into the weekend, but after this week it will be easier to schedule more regular time.

Really excited to have this crew on board. I'm totally going to keep asking @notwaldorf and @mandymichael to contribute along with @davelab6 !

[svgeesus]

if CJK fonts are so huge, how does the median number of font KB compare across countries? We should expect to see Chinese, Japanese, and Korean websites have more font bytes, right?

Not necessarily; I would expect that most sites don't use webfonts (because a single one is huge) and the ones that absolutely have to, use them and take the page weight hit. So the _distribution_ of page weight hit would be different to non-CJK sites. The median is not a good measure of that.

By the way, the typical work-around for "web fonts are prohibitively huge" is "get everyone to install a font locally, put that in the font stack". Which used to be fine, but Safari recently stopped loading locally installed fonts that aren't on the default OS install, and there is an open issue on whether other browsers should do the same. So it is timely to get some hard data on that.

[svgeesus]

Having now read Fonts 2019 it does seem that the 75% use of Google Fonts swamps analysis. I suspect that for 2020, dividing each analysis into "Google Fonts"and "non-Google Fonts" would give an interesting compare and contrast.

It doesn't surprise me that color font usage was so low; not because color fonts aren't good, but because browsers have been very slow to implement CSS restyling of font colors and thus, changing the colors means editing the font itself: a significant barrier to use, and also a fragmentation of cache consistency. Still, it would be useful to see if the usage has changed from 2019.

[obto]

@jpamental No worries. The main reason we have this week set as the deadline is because sometimes we come across metrics that require custom code (custom metrics) to be written and added to the Web Crawler -- which starts running on August 1st.

So if getting the chapter outline looks tough to complete... putting together a list of new metrics we didn't look at last year, that you're considering looking at this year, would be a big help.

[svgeesus]

An older report, perhaps 2015 or 2016, had a cumulative graph showing web font usage rising from 1% in the end of 2010 to 50% across all sites in the beginning of 2015. The link no longer works.

http://httparchive.org/trends.php?s=All&minlabel=Nov+15+2010&maxlabel=Feb+15+2015#perFonts

Five years on, and with the 10th anniversary of the first WOFF 1.0 working draft this year, it would be great to recompute that and find what the usage is now.

[rviscomi]

@HTTPArchive/analysts this chapter needs your help!

[AbbyTsai]

If there is still a fun seat availabe to newbie in sql, then I'd love to jump in as analyst. ^y^

[rviscomi]

Yes please, thanks for stepping up @AbbyTsai!

You can join the #web-almanac-analysts channel in Slack and reach out to @paulcalvano or myself if you have any questions.

[rsheeter]

Happy to help out if I can.

@svgeesus, for web font usage it looks to me like 76% of pages load (though not necessarily use) fonts based on the % of pages with 0 font requests having an upper bound of 24% in the requests/page histogram on https://almanac.httparchive.org/en/2019/fonts#how-many-web-fonts-are-too-many. That doesn't tell you % sites (how do we define site? can/should we care about size/popularity?) but perhaps the underlying dataset has something that could reasonably be used to represent "site"

[rsheeter]

On a per-page basis I got this from the bigquery tables (ty @rviscomi for fixing my original query)

The data and query can be seen in https://docs.google.com/spreadsheets/d/1N5oaO5Sgod70VSplx521E7lkiPww97cOxd7iBD7GLkc/edit?usp=sharing.

[rviscomi]

📟 @jpamental @davelab6 @malchata @RoelN @notwaldorf @mandymichael @svgeesus @rsheeter @AbbyTsai sorry to ping everyone. This chapter is still missing an outline. If anyone has any ideas, please drop them in the doc to get it moving. We were hoping to have it completed by July 20 😬. The most important thing is getting any needed custom metrics implemented by July 27 before the August crawl begins, and it's blocked on the outline setting the scope of the chapter.

@AbbyTsai @RoelN @mandymichael I don't have your email addresses so please "request edit access" to be able to comment/edit.

Thanks everyone for helping to keep us on schedule!

[jpamental]

I've spent some time on the outline, which has started surfacing some questions that would be good to investigate. I'll get those questions more complete later today for proposed new metrics.

[AbbyTsai]

Hi, Everyone, It's happy to join fonts family. First, a little bit about me, My practice journey just start here with all your warm support. I hope you don't mind if find me fresh like a paper. I have drawn some rough metrics to invite all your interesting thoughts together in. Feel free to add or revise it. Thank you.

[davelab6]

I was on vacation last week, I've blocked out time tomorrow to work on this
:)

[davelab6]

Jason and I met today briefly to sync up, and will meet again this Friday
at 2pm EST. Abby and everyone, you are welcome to join!

[obto]

@jpamental @AbbyTsai for the two milestones overdue on July 27 could you check the boxes if:

• the outline has been reviewed and all feasible metrics have been identified
• any necessary custom metrics have been created and you've created a draft PR to track which feasible metrics have had their queries implemented (we've updated the milestone description to clarify this)

Keeping the milestone checklist up to date helps us to see at a glance how all of the chapters are progressing. Thanks for helping us to stay on schedule!

[RoelN]

Hi all, apologies for my absence, I had a much needed vacation. Added some comments to the doc, hope it's not too late.

[mandymichael]

Is there anything that would be helpful for me to look into for this? I'm unsure how to best help out here?

[AbbyTsai]

Hi, everyone, here might love to have your thoughts in the roadmap on how to scan the following specific fonts with stylesheet or html page: font subsetting, icon_fonts, VF+animation. (Special thanks Rod, Dave, Rick for helping collection & clarficiation dataset) 

[RoelN]

Re: icon fonts, for Type-X we look at classnames to guess if an icon font is used there. These classnames were gathered from popular icon font libraries (e.g. FontAwesome). This is hardly foolproof though, and you'd probably catch a lot of noise if you use this method.

Looking at font name metadata might be more reliable, but that involves looking at popular icon fonts and see which metadata they use.

Re: VF animation: looking for font-variation-settings inside @keyframes at-rules, and looking for transition: font-variation-settings. Much harder probably is looking for JavaScript that directly animates font-variation-settings.

[AbbyTsai]

Thanks Roel for the nice explanation.
May I then say that FontAwesome hosts merely icon service which means gathering its metadata might catch them all.

Moreover, those topics still look forward to anyone of folks adding your voice into.
font subsetting, icon fonts, VF+animation.

[RoelN]

Yes, I think it's possible to recognise 99% of FontAwesome fonts being used (the other 1% would be people who optimised/minified/broke their font so much it doesn't contain any metadata or other fingerprints). You could make similar fingerprints for Icomoon, Fontello, Iconic, etc. But you might miss custom implementations of any font that you don't have a fingerprint of. But that might be acceptable?

I wouldn't know how to detect subsetting, apart from counting glyphs/characters in a font and then matching them to how many characters the original font has. But how do you build a database of all the "originals" of all fonts used on the web? You could detect subset usage of subset= and text= of Google Fonts, but that won't work for other services or self hosted fonts.

[AbbyTsai]

Good to have your point of view. Thank you.
As so far here is my understanding on where to scan those fonts and wellcome all you in helping clarification.
/icon fonts: GoogleFont(icon)+FontAwesome+optimised/minified/broke(hostname)
/subsetting: GoogleFont(subset)
/vf+animatin: GoogleFont(keyframes/font-variation-setting), OpenType('gvar','fvar.axisTag')

Then, regarding openType,
I still don't have much ideas on how to json_extract axis filesize(familyName, Axis, AvgSize, SizeFactor, as like this table)
and its feature of Numerals, ligatures, etc?
Could any folks help to point out the roadmap on how collecting them? Thanks.^^

[AbbyTsai]

Hey, everyone,
Here’s my first metric.sql which calls for all you folks to review and comment.
Feel free to rewrite them as you might find much unprofessional behavior. ^^
Thank you.

[AbbyTsai]

@jpamental @davelab6
Would you help to indicate deeply which key axis of filesize with OpenType that might be interesting to metric as you mentioned in outline although I haven't find the road on how to extract them. Also, Feel free to give feedback if you find any metric without meeting the expectation of outline. Thanks.

web-almanac-analysts

Could you give a hand on this query above as I’m new to JS and desire your guidance. Thanks.

[davelab6]

I propose schedule a call on this in the best few days to sync up (Jason &
Abby)

[AbbyTsai]

Awesome, I'm happy to join the meeting. Let me then know your planned time.

[obto]

I've updated the chapter metadata at the top of this issue to link to the public spreadsheet that will be used for this chapter's query results. The sheet serves 3 purposes:

1. Enable authors/reviewers to analyze the results for each metric without running the queries themselves
2. Generate data visualizations to be embedded in the chapter
3. Serve as a public audit trail of this chapter's data collection/analysis, linked from the chapter footer

[LeaVerou]

Hi there again,

I was wondering if there are any plans to calculate stats for font stacks and popular font names via the font/font-family properties? Looking at the content outline, I couldn't figure out whether this is planned or not (there is something about popular fonts, but not sure if it refers to web fonts only).

I'm asking to see if https://github.com/LeaVerou/css-almanac/issues/15 overlaps (in which case we have one less query to do, yay)

[AbbyTsai]

Hoping 04.11 typeface by country would match our taste.

[svgeesus]

I notice

Formats in use (Woff2, etc)
Formats used by percentage?

I'm particularly interested in this: I recently asserted in a discussion that most Webfonts in 2020 are served as WOFF2 (due to widespread browser adoption, ease of conversion, and smallest filesize) and saw a counter-assertion that most are TTF/OTF because "people just throw a font on a server". So I'm very interested to see what the results are here.

Yes, I have seen the 2019 results; but that breakdown is affected by 75% of the results coming from Google fonts. So a differentiated breakdown would be super helpful.

[svgeesus]

Oh, another thing. The 2019 almanac has a section Don't request web fonts if a system font exists which used to be good advice and still is for majority and well-supported languages.

People who speak minority, hard-to-support or unsupported languages though, are used to installing at least one font that supports their language. And that has worked fine for them, except recently Safari stopped allowing local fonts to be used (the reason being to guard against privacy sniffing). That means those users can no longer use Safari (or iOS devices, where WebKit is the only browser engine). Yes, that means Web pages that worked okay for a decade or two suddenly broke for those users.

So the 2020 guide might need to be more nuanced on that topic.

[svgeesus]

Yes, I have seen the 2019 results; but that breakdown is affected by 75% of the results coming from Google fonts. So a differentiated breakdown would be super helpful.

I now see the spreadsheet ad wow, totally different results from 2019 and all sorts of junk MIME types, typos, and so on! Lots to dig into there.

The chart in that spreadsheet worries me, shouldn't the columns add up to 100% or do I misunderstand?

(Yes I know these are preliminary results)

[bazzadp]

The chart in that spreadsheet worries me, shouldn't the columns add up to 100% or do I misunderstand?

Am sure @AbbyTsai can comment further here if needs be, but the query counts the percentage of pages loading that font type. So 76% of desktop sites load a WOFF2 font and 48% of sites load a WOFF font. This means that somewhere between 24% and 48% of sites load WOFF2 and WOFF fonts on the same page, as you can't have more than 100% as you say.

You'd presume those are for two different fonts, though I have seen instances where the same font was requested in both formats due to misconfiguration!

[obto]

@jpamental in case you missed it, we've adjusted the milestones to push the launch date back from November 9 to December 9. This gives all chapters exactly 7 weeks from now to wrap up the analysis, write a draft, get it reviewed, and submit it for publication. So the next milestone will be to complete the first draft by November 12.

However if you're still on schedule to be done by the original November 9 launch date we want you to know that this change doesn't mean your hard work was wasted, and that you'll get the privilege of being part of our "Early Access" launch.

Please see the link above for more info and reach out to @rviscomi or me if you have any questions or concerns about the timeline. We hope this change gives you a bit more breathing room to finish the chapter comfortably and we're excited to see it go live!

[davelab6]

Thank you David, that's great news for me ❤️

[AbbyTsai]

Hello, Jason, Dave, @jpamental @davelab6
Roughly say that the result sheet is almost there as collaborating with Rick, Paul, Barry, thanks content contributors, query reviewers, and welcome any comments.

[svgeesus]

The result that fonts.gstatic.com is the most popular font host in China should be _checked_, because many Google sites are blocked in China. Although gstatic does not appear on List of websites blocked in mainland China.

The reason is important, because "WebFonts are rarely used in China because the main free font website is unavailable" is a very different story from "WebFonts are rarely used in China because they are huge" or "WebFonts are rarely used in China because the license is too restrictive".

[svgeesus]

Comparing the MIME types and the @font-face format strings, I see that woff2 and woff broadly correspond (75% and 9%) while SVG in format is much higher (6%) than as MIME type (,0.01%). Odd.

[svgeesus]

The font table frequencies are hard to interpret, because the highest possible frequency is 6.97% (for all the mandatory tables). Maybe add another column which is the percentage of fonts containing that table (so head, cmap etc would go to 100%) which allows comparing the frequency of use of the lesser used tables? So for example CFF desktop would be 2,775,483 * 100 / 27,983,775 = 9.92% of all fonts, rather than 0.81% of all tables.

[davelab6]

Gstatic isn't blocked officially/nationally, but since the gfw is
administered regionally, and no servers are within prc, it is often
unreliable.

[svgeesus]

Thanks for the clarification, @davelab6

[AbbyTsai]

note that the result sheet has add a table showing a percentage of mandatory tables in opentype as nice point of Chris. thanks.

[svgeesus]

@jpamental @davelab6 is the content being developed in another repo? I had a look at the document to start reviewing, but it seems empty except for the early outline.

[davelab6]

Jason and I worked on the doc outline, folding in all comments inline, and
then it was Thanksgiving and while we both intended to contribute over the
holidays, we did not. I'm on a final week of paternity leave but I'll aim
to squeeze in an hour or two every night this week to get a fleshed out but
unedited article ready for launch.

[svgeesus]

Not trying to rush you, just trying to contribute. I could also help with authoring, as well as reviewing, if you would like.

[davelab6]

Thank you Chris! Please dive in :)