Why are some fonts don't show up properly on server with Puppeteer? - svg

Question

My code generates a transparent screenshot with an SVG input and overlays it in a video. There are some issues with the fonts. All fonts display correctly on my local Windows environment. But some fonts DO NOT display correctly on the linux server. What can the problem?
screenshot of display of the SVG file on a browser
screenshot of video snapshot from local
screenshot of display of the SVG file on a browser
Here are snippets of a font that works and one that doesn't.
<g transform="matrix(1 0 0 1 800.64 329.62)" style="" >
<text xml:space="preserve" font-family="Ecuyerr" font-size="50" font-style="normal" font-weight="400" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1; white-space: pre;" paint-order="stroke" ><tspan x="-135.5" y="15.71" >Ecuyerr</tspan></text>
</g>
<g transform="matrix(1 0 0 1 332.6 250.68)" style="" >
<text xml:space="preserve" font-family="Carolyna Cute" font-size="50" font-style="normal" font-weight="400" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1; white-space: pre;" paint-order="stroke" ><tspan x="-126.97" y="15.71" >Carolyna Cute</tspan></text>
</g>
Puppeteer uses a link to get the font info.
<link href='https://domain/fonts/fonts.css' rel='stylesheet'>
#font-face {
font-family: 'Carolyna Cute';
src: url('carolynacute-webfont.eot');
src: url('carolynacute-webfont.eot?#iefix') format('embedded-opentype'),
url('carolynacute-webfont.woff2') format('woff2'),
url('carolynacute-webfont.woff') format('woff'),
url('carolynacute-webfont.ttf') format('truetype'),
url('carolynacute-webfont.svg#carolyna__cuteregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font
#font-face {
font-family: 'Ecuyerr';
src: url('ecuyerr-webfont.eot');
src: url('ecuyerr-webfont.eot?#iefix') format('embedded-opentype'),
url('ecuyerr-webfont.woff2') format('woff2'),
url('ecuyerr-webfont.woff') format('woff'),
url('ecuyerr-webfont.ttf') format('truetype'),
url('ecuyerr-webfont.svg#ecuyerdaxregular') format('svg');
font-weight: normal;
font-style: normal;
}
I have added "--font-render-hinting=none". It doesn't work.
Then I upload true type fonts to the /usr/shared/fonts directory. It seems to fix all fonts except one, Carolyna Cute.
Then I get another set of the font and update the CSS file and upload the true type to the fonts folder. It is still not working.
1 font not working