How to add a Google Font?

[cweise]

Hi, I am trying to convert a recharts chart svg to a png and I am using a google font for the labels:

<svg id="donut-1" cx="50%" cy="50%" class="recharts-surface" width="450" height="550" viewBox="0 0 450 550" version="1.1">
  <defs>
    <clipPath id="donut-2-clip">
      <rect x="5" y="5" height="523" width="440"></rect>
    </clipPath>
  </defs>
  <g class="recharts-layer recharts-pie">
    <g class="recharts-layer">
      <g class="recharts-layer recharts-pie-sector">
        <path name="Batterieentladung" fill="#196900" stroke="#fff" cx="225" cy="266.5" color="#196900" class="recharts-sector" d="M 365,266.5
    A 140,140,0,
    0,0,
    220.77833953308004,126.56366596590416
  L 225,266.5 Z"></path>
        </g>
      <g class="recharts-layer recharts-pie-sector">
        <path name="Direktverbrauch" fill="#ffc003" stroke="#fff" cx="225" cy="266.5" color="#ffc003" class="recharts-sector" d="M 220.77833953308004,126.56366596590416
    A 140,140,0,
    0,0,
    88.29532939191193,296.6965732150875
  L 225,266.5 Z"></path>
</g>
<g class="recharts-layer recharts-pie-sector">
<path name="Netzbezug" fill="#595959" stroke="#fff" cx="225" cy="266.5" color="#595959" class="recharts-sector" d="M 88.29532939191193,296.6965732150875
    A 140,140,0,
    0,0,
    365,266.50000000000006
  L 225,266.5 Z"></path>
</g>
</g>
<g class="recharts-layer recharts-pie-labels">
<g class="recharts-layer">
  <text x="273.74547098786616" y="216.26177692064437" fill="white" text-anchor="middle" dominant-baseline="central" font-size="14" style="font-family: 'Open Sans';">1274 kWh/a</text>
</g>
<g class="recharts-layer">
  <text x="169.77011852757943" y="223.4923240276532" fill="white" text-anchor="middle" dominant-baseline="central" font-size="14" style="font-family: 'Open Sans';">1399 kWh/a</text>
</g>
<g class="recharts-layer">
  <text x="232.59396236219658" y="336.0868646774773" fill="white" text-anchor="middle" dominant-baseline="central" font-size="14" style="font-family: 'Open Sans';">2327 kWh/a</text></g></g></g></svg>

When I am saving the svg to an png, the font is not included, means I have a Times New Roman kind of font included. I already tried the fonts option like this:

const donutOneUri = await svgConverter.svgAsPngUri(
      document.getElementById("donut-1"),
      {
        fonts: [
          {
            text: "Open+Sans",
            url:
              "https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800",
            format: "woff"
          }
        ]
      }
    );

That was not working.

Thank you for your help!

[umichdoe]

I had the same problem. Check out my answer here: https://stackoverflow.com/a/60554304/7941447

[andrius-386]

Hi, following format worked for me:

const imageOptions = {
      fonts: [
        {
          url: 'https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2',
          format: 'application/font-woff2',
          text: "@font-face {font-family: 'Roboto';  font-style: normal;  font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format('woff2');  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}",
        },
        {
          url: 'https://fonts.gstatic.com/s/sharetechmono/v9/J7aHnp1uDWRBEqV98dVQztYldFcLowEFA87Heg.woff2',
          format: 'application/font-woff2',
          text: "@font-face {font-family: 'Share Tech Mono'; font-style: normal; font-weight: 400; src: local('Share Tech Mono'), local('ShareTechMono-Regular'), url(https://fonts.gstatic.com/s/sharetechmono/v9/J7aHnp1uDWRBEqV98dVQztYldFcLowEFA87Heg.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }",
        }
      ],
    };

[kevinpiac]

@andrew6666 I'm facing the same issue. I've tried to add the exact same "fonts" options than yours. However, it appears that "Share Tech Mono" is working while "Roboto" is not.

The weird thing is that none of the above are installed in my system. Any idea of the difference/reason that can cause this issue?