Chapter 6. Fonts

Web Almanac 2019
#1

Share your questions, comments, and ideas about the Fonts chapter of the Web Almanac…

1 Like
#2

I’m amazed to see such high usage (1.8%) of variable fonts! Is there a way to access the dataset to see which sites are using them?

#3

@stewf The majority of this sites actually use Oswald (94.5%) and Comfortaa (5.3%) followed by Markazi Text, Work Sans, Source Sans/Serif, Inter and 3 or 4 sites using others. I can share a Google Doc of all variable fonts from the Almanac results incl the page URL if you like?

#4

It seems the “most popular typefaces” section is kinda inaccurate, simply because it’s aggregated on font-family name only.

According to your “ranking” for example FontAwesome is only on rank #11, even though my best guess would be it should be on #2.

Looking at the Almanac data there are 723 different font-family namings for FontAwesome alone, like

Timely_FontAwesome
FontAwesomeRegular
sow-fontawesome
FontAwesomeLight
fontawesome-webfont
FontAwesomePro
FontAwesomePB
FontAwesomeFull
fontawesome fa-regular
FontAwesome5FreeSolid
FontAweSomeNew
Fontawesome-solid
FontAwesome5
FontAwesome5 Brands
FontAwesome-V5
fontAwesome1
fontawesome_0
FontAwesome5-regular

and so on.

To be more specific:

4,455,431 FontAwesome < only this is taken into account
67,703 fontawesome
31,715 FontAwesomePro
19,740 Timely_FontAwesome
19,271 fontawesome-webfont
15,382 sow-fontawesome-free
12,058 evo_FontAwesome

… plus 716 alternate font-family names

I also noticed an issue with the function to retrieve font names in respective query, it also returns font names like

"\FontAwesome\;src:url(//diyservicemanuals.com/wp-content/thesis/skins/sparkez/\fonts/fontawesome-webfont.eot?v=4.0.3\);src:url(//diyservicemanuals.com/wp-content/thesis/skins/sparkez/\fonts/fontawesome-webfont.eot?#iefix&v=4.0.3\) format(\embedded-opentype\), url(//diyservicemanuals.com/wp-content/thesis/skins/sparkez/\fonts/fontawesome-webfont.woff?v=4.0.3\) format(\woff\), url(//diyservicemanuals.com/wp-content/thesis/skins/sparkez/\fonts/fontawesome-webfont.ttf?v=4.0.3\) format(\truetype\), url(//diyservicemanuals.com/wp-content/thesis/skins/sparkez/\fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular\) format(\svg\)"

or multiple names like

"微軟正黑體,新細明體, Arial, Helvetica, sans-serif, FontAwesome"

Guess this is related to the original response data and not the function itself though.

2 Likes
#5

There’s another issue with the “most popular typefaces” btw., possibly affecting other sections, too. Some requests attributed to Open Sans are not actually requests related to the actual page they had been attributed to, but due to Cloudflare’s anti-bot protection.

For example: http://www.madereros.com/ doesn’t use any web font at all, even though according to the Almanac data it does, but instead your crawler saw Cloudflare’s anti-bot page here (which uses Open Sans).