search

Munter / subfont

Command line tool to optimize your webfont loading. Aggressive subsetting based on your font use, self-hosting of Google fonts and preloading
MIT License
1.56k stars 29 forks source link

Recognise fonts used in SVGs #151

Closed thewilkybarkid closed 3 years ago

thewilkybarkid commented 3 years ago

@font-face can be used in SVGs as well, and as long as the SVG is included in HTML using <object> (rather than <img>) the font will be loaded when viewing. No idea about the complexity, but it'd be amazing to follow and process fonts in SVGs too.

papandreou commented 3 years ago

Interesting. Should be fairly easy to find those fonts, as assetgraph understands svgs and their nested stylesheets. In terms of tracing the characters that are in use, I wonder if we can just pretend that the SVG DOM is HTML and trace it?

Looks like browsers have a much simpler default stylesheet for SVG that doesn't use any font-related properties: https://chromium.googlesource.com/chromium/blink/+/refs/heads/main/Source/core/css/svg.css

papandreou commented 3 years ago

I took a quick look, and it appears that external web fonts referenced from SVGs are only loaded by browsers when the SVG is rendered standalone, not when it's referenced via an img element: https://graphicdesign.stackexchange.com/questions/5162/how-do-i-embed-google-web-fonts-into-an-svg

So it appears that you need to either base64 encode the fonts or inline the SVG inside your HTML to even use webfonts. We should be able to make tracing and subsetting work in these scenarios, but it seems a bit niche. Can you talk a bit more about the use case you have in mind?

thewilkybarkid commented 3 years ago

Yeah, SVGs in an <img> can't load external resources; if you use a nested browsing context like <object> (or <iframe>) they can.

I'm looking at a bunch of small SVGs on the same page, referencing the same stylesheet and webfont. Not sure at the moment whether embedding the SVGs in the HTML directly, or the styles/fonts in the SVGs (so can use <img>), or all using shared assets (so have to use <object>) is the 'best' option yet. But, they being generated from Graphviz with a reference to a stylesheet so the latter is the default setup.

papandreou commented 3 years ago

Okay, thanks for the extra context. Makes sense that we also need to trace SVG "islands" nested inside HTML.

papandreou commented 3 years ago

Fixed in 6.2.0