no-remote-fonts should block connections to fonts.googleapis.com and typekit.net

[anewuser]

I have this rule and it does block the direct download of web fonts:

no-remote-fonts: geektv.me true

However, connections to fonts.googleapis.com are still made to download its CSS containers for the fonts. Example page: http://geektv.me/watch-online/the-simpsons

Here's the contents of https://fonts.googleapis.com/css?family=Maven+Pro:400,700,500,900 , as an example:

@font-face {
  font-family: 'Maven Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Maven Pro Regular'), local('MavenProRegular'), url(https://fonts.gstatic.com/s/mavenpro/v7/MG9KbUZFchDs94Tbv9U-pVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
}
@font-face {
  font-family: 'Maven Pro';
  font-style: normal;
  font-weight: 500;
  src: local('Maven Pro Medium'), local('MavenProMedium'), url(https://fonts.gstatic.com/s/mavenpro/v7/SQVfzoJBbj9t3aVcmbspRugdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
}
@font-face {
  font-family: 'Maven Pro';
  font-style: normal;
  font-weight: 700;
  src: local('Maven Pro Bold'), local('MavenProBold'), url(https://fonts.gstatic.com/s/mavenpro/v7/uDssvmXgp7Nj3i336k_dSugdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
}
@font-face {
  font-family: 'Maven Pro';
  font-style: normal;
  font-weight: 900;
  src: local('Maven Pro Black'), local('MavenProBlack'), url(https://fonts.gstatic.com/s/mavenpro/v7/-91TwiFzqeL1F7Kh91APwegdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
}

It seems to attempt to load the font locally first, but since most users don't have those fonts, it's downloaded from Google instead, making these CSS connections pointless in case you're blocking remote fonts.

On sites that use typekit.net, such as this page, uBlock still also let Firefox connect to use.typekit.net and download a CSS file that includes the font encoded in base64, even if you've blocked remote fonts:

Firefox 41 Beta
uBlock 1.0.0.1

[0xBRM]

... Is it not working as intended then? Just block CSS requests to a given hostname.

[anewuser]

@CrisBRM even if you don't mind downloading useless resources, I showed that Typekit CSS files include the fonts built-in, so no, the toggle isn't working as intended.

[0xBRM]

Yeah, it's built in. So what? It doesn't connect to third party hostnames to fetch them (since you're already connected to that domain), so you're not any less or any more fingerprintable.
If you don't want it, just block CSS requests to fonts.googleapis.com, using * fonts.googleapis.com stylesheet block. uBlock is blocking 'fonts' just fine, and it can block stylesheets as well.

[vdcbb]

You have to use a filter to block those. Try this one: https://www.fanboy.co.nz/fanboy-antifonts.txt

[anewuser]

@vdcbb Thank you, but I've been here since the beginning. I just want gorhill to be aware of this.

The point is that I do not want to block them universally, but just for the sites for which I've disabled remote fonts. gorhill will understand what I have in mind and consider my report.

[vdcbb]

@anewuser If you want to block them for specific sites, use the matrix.

Here's discussion around the creation of the no-remote-fonts switch: #15

[gorhill]

@anewuser has a point about inline fonts: the main benefit of blocking remote fonts is security, and not blocking inline fonts bypass the main intent. I expect this can be resolved by injecting a proper content security policy directive.

The other aspect, the loading of CSS files which are strictly for font-purpose only, is more debatable. This would means to take on the manual task of creating and maintaining a list of such resources, and to add "hacky" code to uBlock to transpose these specific resources into font resources so that they are blocked/allowed as per the no-remote-fonts switch. I am quite less inclined to agree to this.

[gorhill]

Some altruistic volunteer will have to step up to create a specific font-blocking lists.