How to know how many website using system font?

Analysis
1

I want to know how many websites are using system font.

System font declarations looks like this

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

We can search if the website has font-family: -apple-system, BlinkMacSystemFont, on body or html tag in CSS file. It won’t cover all methods of using font but most of them are using this pattern.

1 Like
2

It would be more interesting if we can see how many sites are using system fonts, web fonts and google fonts and custom fonts and their respective sizes

1 Like
3

These would be interesting things to cover in the Fonts chapter of the Almanac! Feel free to suggest new metrics you’d like to see.

One question for clarification: are all non-web fonts “system fonts” by definition? Can we just invert the % of sites with web fonts? There’s also the question of where/how the web fonts are hosted (Google Fonts, self-hosted, etc) which is an interesting breakdown.

2 Likes
4

I think actual meaning of system font is the font used by Operating system in its interface, Like San Francisco font for Mac.

Common which are available on many platform are called as “Web Safe fonts”. Fonts like Arial, Times new roman.