These are chat archives for assetgraph/assetgraph

24th
Mar 2017
Peter Müller
@Munter
Mar 24 13:12
@papandreou I'm poking around a bit in the font subsetting branch. I want to try my luck with using googles subsetting feature to specifically target those for subsetting and pulling them into the local build
Andreas Lind
@papandreou
Mar 24 13:13
@Munter Awesome :)
Peter Müller
@Munter
Mar 24 13:13
I abstracted out the stuff that gets the chars by font, so that can be shared if the local subsetting stuff gets ready
Andreas Lind
@papandreou
Mar 24 13:15
Maybe we can use https://github.com/nodebox/opentype.js instead of that crazy Java tool
for the subsetting itself
@gustavnikolaj did some research wrt. the fallback behavior of different browsers that don't support unicode-range. IIRC it turns out that Edge and Safari will respectively pick the first and last @font-face rule when there are multiple ones, so it gets a little hairy.

So if the input contains

@font-face { font-family: foo; src: url('bar.woff'); }

and it turns out that the foo font can be subset, we'll need to output something like:

@font-face { font-family: foo; src: url('bar.woff'); }
@font-face { font-family: foo; src: url('bar-subset.woff'); unicode-range: U+0025-0035; }
@font-face { font-family: foo; src: url('bar.woff'); }

... in order to make sure that all browsers that don't support unicode-range will fall back to the original bar.woff.

Peter Müller
@Munter
Mar 24 13:21
But if I can guarantee that I have the full range of chars I can just leave out the fallbacks alltogether
Maybe the google subset css response already takes these browser quirks into acount
Andreas Lind
@papandreou
Mar 24 13:22
Yeah, that's correct. But that's only really safe when there's no JavaScript on the page.
Andreas Lind
@papandreou
Mar 24 13:22
Yeah, they do -- they sniff the user agent and dump down the CSS express-legacy-csp style.
Peter Müller
@Munter
Mar 24 13:22
For my specific need right now I know that noone is messing with my headlines :P
Andreas Lind
@papandreou
Mar 24 13:23
That's good to hear :)
Maybe we should add some sort of marker to the CSS that can guide the subsetting
Peter Müller
@Munter
Mar 24 13:24
I dont follow...
Andreas Lind
@papandreou
Mar 24 13:24
I'm talking about the general buildProduction case again.
Sometimes our users will know that it's safe to subset a font without any hairy fallbacks.
Peter Müller
@Munter
Mar 24 13:26
True. We could make it a data-attribute on the <link />
data-subset-safe indicates that a full replacement can be done
Otherwise we prepend the subset font css before the original and unchanged <link>?
I also have half a mind to just reduce the supported fonts to woff1, which fully covers my needs right now
Andreas Lind
@papandreou
Mar 24 13:32
Wouldn't we want more fine-grained control, like at least per @font-face rule, or maybe even for each src: url(...), url(...) entry?
Peter Müller
@Munter
Mar 24 13:33
I'm not sure what I would use that control for
Andreas Lind
@papandreou
Mar 24 13:34
Right, I guess the first step should be to make something that's 100% safe in all browsers without any knobs.
Peter Müller
@Munter
Mar 24 13:34
I'll force push the branch. Do you have any WIP locally somewhere?
Andreas Lind
@papandreou
Mar 24 13:35
Go for it.
Peter Müller
@Munter
Mar 24 21:11
Wtf...
console.log('indexOf', fontFacesToSubset, fontFaceFragment, fontFacesToSubset.indexOf(fontFaceFragment));
indexOf [ 'Open Sans' ] 'Open Sans' -1
Copy/pasting the values into a console gives me index 0
Peter Müller
@Munter
Mar 24 21:26
Ah, console logging is playing tricks. string with quotes inside
Andreas Lind
@papandreou
Mar 24 21:33
argh
Peter Müller
@Munter
Mar 24 21:34
I think I have the abstract library that's shared between the two font subsetting transforms covering both use cases now
In the case of google subsetting I need to populate the external CSS, but don't care for the fonts. But it was set up to only work on loaded fonts
Andreas Lind
@papandreou
Mar 24 21:41
What do you mean, don't care for the fonts?
Peter Müller
@Munter
Mar 24 21:42
The full set of fonts. I don't need them. I only want to download the generated subset
Andreas Lind
@papandreou
Mar 24 21:43
You mean when building or when loading the resulting page?
Peter Müller
@Munter
Mar 24 21:44
When building. I can keep the original webfont CSS link in there as a safe fallback if we don't trust the subset fully. But I don't need the fonts themselves during build
Andreas Lind
@papandreou
Mar 24 21:46
Ah, so you're basically just adding &text=... to the url?
Peter Müller
@Munter
Mar 24 21:46
I'm at the point where I need to convince google to send me a relevant stylesheet. How do I set a user-agent header with teepee?
Can't use standard population for that I think
Found it
Andreas Lind
@papandreou
Mar 24 21:48
assetGraph.teepee.headers['User-Agent'] = ...
Peter Müller
@Munter
Mar 24 21:50
Ah, and then just set it back when I'm done?
Andreas Lind
@papandreou
Mar 24 21:51
I'm not sure anything actually depends on it being AssetGraph vx.y.z
Peter Müller
@Munter
Mar 24 21:51
I need to figure out if I can get along with only woff, or if I need to do some crazy stitching baed on all the formats: https://github.com/majodev/google-webfonts-helper/blob/539f0c41be4735b5b9d7005aef5022d0d9729fbe/server/logic/conf.js
Andreas Lind
@papandreou
Mar 24 21:57
This guy thinks it's time to simplify the "bulletproof" snippet: https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/
Peter Müller
@Munter
Mar 24 22:02
I'l start out with woff only. Then I can look into woff2 if the POC does what I hope it will
Peter Müller
@Munter
Mar 24 23:28
I have a proof of concept: assetgraph/assetgraph@c061208
I need to figure out how to make that population run, so I can move the resulting subset into the current assetgraph root