How is this web resource hidden from the user?

Motivation: I've been interested in how various agencies hide data, either through incompetence or willful intent, that is required to be "open". Specifically I've seen oil companies use images to display their transparency reports and financial companies display data via massive time-delayed queries to prevent scraping. Recently, I encountered a new method, this time implemented as a pseudo-DRM:

Question: How does myfont.com hide the font from the browser? Can it be defeated?

Research: Consider the page for the font Modern Brush. It showcases a webfont for sale. Under Chrome's developer tools there are several fonts listed:

but none of the fonts look like the font used on screen. The fonts are clearly loaded however, since there is an editable div:

<div contenteditable="true" spellcheck="false" 
  class="text headline" 
  data-font="Modern Brush" 
  style="font-family: 'Modern Brush';">
            The Wonder of Webfonts
</div>

and a corresponding CSS style:

Close votes: I think that understanding this particular technique falls under the purview of SE Information Security. Additionally, please note that this question asks for information on circumventing a DRM (even if the intent is pedagogic). These reasons may constitute a reason for closing. If so, please advise in the comments.