Name:

CSS Font Detection (passive)

Original feature purpose:

The @font-face at-rule specifies a custom font, which can be loaded from either the user's own computer or a remote server. If a specified font name is found on the user's computer, that local font is used. Otherwise, the font resource specified using the url() function is downloaded from the remote server and used. For more details see, e.g., MDN web docs

FP-Explanation:

Patrick Schur shared a script via GitHubGist which returns a list of installed fonts on the client without JavaScript. The PHP script sets for each font which should be tested a @font-face rule and a corresponding div-element, with the font-family attribute set to the respective test font. The 'local' src-attribute of the @font-face rule is set to the name of the font and the remote address is set to a PHP get request, which gets triggered like a canary.

@font-face {
  font-family: 'TeamViewer13';
  src: local('TeamViewer13'), url('fp_css_font.php?font=TeamViewer13');
}

There are two cases: the font is found locally and is then used or the font is not found locally and the URL is accessed. In the latter case, the PHP script is called with the URL parameter 'font' set to the font name that is not available on the client system. All unsupported fonts are logged in the PHP session variable and will be compared with the initial test font stack after all styles are applied to the test-div-elements. All tested fonts from the font stack that are not logged are supported by the client. A hash of all supported fonts serves as fingerprint.

Demo:

>> Jump to CSS Font Fingerprinting Demo <<

FP-Type:

passive

FP-Categories:

hardware-dependent, software-dependent, unchanged-consistent

Counter-measures:

• Do not allow pages to choose their own fonts
  Explanation: If only fonts defined in the browser settings are allowed to be used by websites, this font detection will not work.

Publications/References:

• Returns a list of installed fonts on the client (w/o javascript) (Patrick Schur, GitHubGist)
• Crooked Style Sheets (GitHub)

Passive CSS Font Detection:

Click here to detect fonts via PHP.