How the licensed web font is getting rendered?

Question

I am looking at the source code of a project where a licensed font from myfonts.com is used.

The css file contains this -

  /* @import must be at top of file, otherwise CSS will not work */
    @import url("//hello.myfonts.net/count/123d4d");

   @font-face {
  font-family: 'SoliPx';
  src: url('webfonts/123D4D_1_0.eot');
  src: url('webfonts/123D4D_1_0.eot?#iefix') format('embedded-opentype'),url('webfonts/123D4D_1_0.woff') format('woff'),url('webfonts/123D4D_1_0.ttf') format('truetype');
}

And as mentioned in the source urls - there are eot, woff, ttf files in the local webfonts folder of project.

I know how @font-face and webfonts work in general.

But in the case above where a licensed/commercial font is used, I don't see any font files downloaded in Dev Tools, but the text is rendered with the specified font.

There is a net request that goes to hello.myfonts.net/count/123d4d with status 200 and response content-type of "text/css" but nothing in the response body.

What is happening internally? How this is working?

Answer 1

I've dealt with this before, and here is what that imported file does:

1. As far as actually loading the fonts, it does nothing. I've left it out before (while testing) and the fonts load fine from my server.

2. It counts the number of times the files is imported by your CSS (hence the /count/in the URL). If you read the myfonts.com webfont license, most of the webfonts come with a monthly pageview cap. If you pass that cap myfonts will want to charge your account again, or suggest you purchase a new license with a higher cap.

So what we really have here is an API endpoint that returns an empty CSS file. Every time that CSS file is loaded, myfonts adds a +1 to the number of monthly page views to the account that corresponds with the hash at the end, in your case 123d4d.

Once again, it has nothing to do with loading the fonts themselves. You have the files on your server, and they will load when referenced—full stop.