HTML joining WOFF font files

user_775575 0
Viewed 122

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

<style>
@font-face {
    font-family: "ArialNarrow-Bold";
    src: url("data:application/font-woff;charset=utf-8;base64,d09GRg.....");
}
</style>

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

<style>
@font-face {
    font-family: "ArialNarrow-Bold";
    src: url("data:application/font-woff;charset=utf-8;base64,d09GRg.....");
}
</style>

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?

font-face svg html javascript
1 Answers

I ended up searching with regexp SVG's, and adding unique string to each font-family (where it is defined, and where it is used within the document). With this - every font, that has a duplicate, is unique within the whole SVG document.

user_7755750
Related