How to track how many users saw a web font?

Question

I'm using font-display: optional to make my fonts optional and just show it to users with fast internet connections. It's not important to have the font there all the times, and the design team doesn't want to have the font swap ocurring. I was asked if it's possible to track the number of users who were served with the font. The fonts are now self-hosted, we are using Adobe Typekit. Anyone has any idea how to track it?

Answer 1

Firstly, if you were ok with using javascript, this question may help you: How to get the actual rendered font when it's not defined in CSS?

First you would have to define the function given in the accepted answer:

function css(element, property) {
    return window.getComputedStyle(element, null).getPropertyValue(property);
}

And then you could use it like this:

var fontUsed = css([insert element here], 'font-family')

I would then use ajax and php to upload the fontUsed variable to a mySQL database, creating a new row for each user. You can then process the results and see how many users were served with your font.

See the w3schools tutorial on ajax if you need help: https://www.w3schools.com/js/js_ajax_intro.asp