Only download truetype files from Google Web Fonts and convert them locally

[papandreou]

Fixes #109, local font conversion tools lifted from #56

Avoids the problem where we end up with multiple @font-face declarations when downloading the woff2 version given enough characters in the subset: #109 (comment)

It causes a small (2%) increase in the size of the woff2 file in one of the test cases: https://github.com/Munter/subfont/pull/115/files#diff-fab359c44278133fd8ef28aafc5b4a2cR479

Not sure if it's significant enough that we should try to track it down.

[coveralls]

Pull Request Test Coverage Report for Build 474

• 39 of 41 (95.12%) changed or added relevant lines in 3 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage increased (+0.09%) to 89.687%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
lib/convertFontBuffer.js	20	22	90.91%

Totals
Change from base Build 466:	0.09%
Covered Lines:	1052
Relevant Lines:	1125

---

💛 - Coveralls

[papandreou]

Not sure if it's significant enough that we should try to track it down.

I couldn't resist:

$ curl -H 'User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.835.2 Safari/537.36' 'https://fonts.googleapis.com/css?family=Open+Sans:400&text=Helo&format=woff2'

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/l/font?kit=mem8YaGs126MiZpBA-U1V48aHa0AbQ&skey=62c1cbfccc78b4b2&v=v17) format('woff2');
}

$ curl 'https://fonts.googleapis.com/css?family=Open+Sans:400&text=Helo'

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/l/font?kit=mem8YaGs126MiZpBA-U1Uo8aHa0AbQ&skey=62c1cbfccc78b4b2&v=v17) format('truetype');
}

$ curl -s0 -o opensans_helo_google.woff2 'https://fonts.gstatic.com/l/font?kit=mem8YaGs126MiZpBA-U1V48aHa0AbQ&skey=62c1cbfccc78b4b2&v=v17'
$ curl -s0 -o opensans_helo_google.ttf 'https://fonts.gstatic.com/l/font?kit=mem8YaGs126MiZpBA-U1Uo8aHa0AbQ&skey=62c1cbfccc78b4b2&v=v17'
$ node -e "fs=require('fs').promises;(async()=>{await fs.writeFile('opensans_helo_local.woff2', await require('wawoff2').compress(await fs.readFile('opensans_helo_google.ttf')))})()"
$ ls -l opensans_helo_* | cut -d" " -f 5,9
4044 opensans_helo_google.ttf
2500 opensans_helo_google.woff2
2416 opensans_helo_local.woff2

... It seems like wawoff2 actually produces a slightly smaller woff2 file than the one we get from Google. The apparent increase in size must be because this upgrades the mock to a newer version of the Open Sans font, then.

Also, according to diff <(ttx -o - opensans_helo_google.woff2 2>/dev/null) <(ttx -o - opensans_helo_local.woff2 2>/dev/null) there's no difference in the OpenType data inside the woff2 containers, so we're actually really doing better. Which is interesting, given that wawoff2 is a wasm port of Google's own woff2 library 🤔

[Yankovsky]

As I understand we need woff/woff2 full versions for fallback if it is enabled.

[Yankovsky]

TIL about ttx tool from fonttools library.

[Yankovsky]

Also, according to diff <(ttx -o - opensans_helo_google.woff2 2>/dev/null) <(ttx -o - opensans_helo_local.woff2 2>/dev/null) there's no difference in the OpenType data inside the woff2 containers, so we're actually really doing better.

So what is the difference then? Some meta data?

[papandreou]

So what is the difference then? Some meta data?

It must be more efficient brotli compression settings in wawoff2. If I use woff2_decompress to convert the woff2 that Google Web Fonts provided, then recompress it with wawoff2, I also end up with a file that's 2416 bytes long.

[papandreou]

As I understand we need woff/woff2 full versions for fallback if it is enabled.

Yeah, at present the fallback in the Google Web Fonts case consists of us async-loading the original CSS from their servers after the document has loaded:

subfont/lib/subsetFonts.js

Lines 220 to 245 in 8770e73

	const asyncCssLoadingRelation = htmlAsset.addRelation(
	{
	type: 'HtmlScript',
	hrefType: 'inline',
	to: {
	type: 'JavaScript',
	text: `
	(function () {
	var el = document.createElement('link');
	el.href = '${htmlAsset.assetGraph.buildRootRelativeUrl(
	originalRelation.to.url,
	htmlAsset.url
	)}'.toString('url');
	el.rel = 'stylesheet';
	${
	originalRelation.media
	? `el.media = '${originalRelation.media}';`
	: ''
	}
	document.body.appendChild(el);
	}())
	`,
	},
	},
	'lastInBody'
	);

There are some good things about this, but we've been meaning to also fully self-host the fallback for a long time: #31

This PR is a step towards that -- I can try looking into it next.