I am getting multiple external SVG documents and adding them to a single document. The SVGs I get are generated by a thrid party, I can't change them. I can manipulate them as a strings once I get them. They come with embedded fonts like this
@font-face {
font-family: "ArialNarrow-Bold";
src: url("data:application/font-woff;charset=utf-8;base64,d09GRg.....");
}
It seems that the embedded font doesn't contain all characters. It contains only those present in its SVG document.
When I add second document, if it has the same font, it also adds
@font-face {
font-family: "ArialNarrow-Bold";
src: url("data:application/font-woff;charset=utf-8;base64,d09GRg.....");
}
But for a different character set - the ones in the second SVG document.
When they are put together, the browser will ignore the first time the font-face was defined, and use only the second font. As a result, some characters from the first SVG are not displayed.
There are no additional props on the @font-face rule (like unicode-range).
Node is used to generate the final, compiled SVG image. It is then rendered in puppeteer (chrome) to generate a PDF.
Are there any chrome flags, html meta tags, that could solve this?