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?

Solution

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.

Comments

[Johnbabu Koppolu]

@JukkaK.Korpela - Please read my question - just want to know how the fonts are rendered, how the font files are concealed and it is not about licensing terms

[Bradley Flood]

So the comment in the CSS file from MyFonts stating @import must be at top of file, otherwise CSS will not work (referring to the count script) is not actually true? They are just bluffing to make sure you count your views?

[Phil Ricketts]

It's technically incorrect. It will work, but they want people to include it for accurate pageviews. An ethical approach is to load that hello.myfonts.net URL asynchronously via Javascript. This way, MyFonts still get their page views, and your entire stylesheet is not blocked by a pagecounter URI (!).

[NM Pennypacker]

+1. Good catch @TristanZimmerman. I was testing my site on slower networks and found that the import was preventing the whole page from rendering. Don't understand why myfonts.net cares about page views. I did PAY for the font.

[Dirk Diggler]

You paid for webfont license, which myfonts.net clearly states as being limited to a specific number of monthly pageviews

[Urs]

That's not the point, @NickM just says that if you pay for the font you can expect a non-blocking tracker

[tsauerwein]

If you include the tracker as JS resource as suggested by Phil Ricketts, also consider using Subresource Integrity to prevent XSS.

[Mr. Hugo]

Note that leaking IP addresses might be illegal without prior explicit consent.

[kirelagin]

The comment that “@import must be at top of file” is actually technically correct in the sense that @import rules must come first, so you can’t move it at the end of the file. It is not saying that the CSS file will become bad if you remove the import, it is saying that you cannot move the import around.