using multiple fonts in sharpjs

Question

I'm using sharp.js to add text on a png image. I need to have 3 fonts be rendered on the image in different places however, only one font is being properly rendered and the other 2 are repeated. I have the fonts in ttf files.

Here's an image of the generated output.

Here's my code to add the text on the image

sharp("chart.png")
  .composite([
    { input: svgBuffer, left: 300, top: 200 },
    { input: svgBuffer2, left: 300, top: 250 },
    { input: svgBuffer3, left: 300, top: 300 },
  ])
  .toFile("output.png");

Here's the code that defines the SVG buffers.

const svgText = `
              <svg width="${width}" height="${height}">
              
              <style>
              @font-face{
                              font-family: Bahnschrift;
                              src: url(Bahnschrift-Regular.ttf);
                          }
                          .title {
                                  fill: white;
                                  font-size: 23px;
                                  font-family: Bahnschrift;
              }
              </style>
              
            <text x="45%" y="40%" text-anchor="middle" class="title">Bahnschrift Regular</text>
            </svg>`;

const svgText2 = `
            <svg width="${width}" height="${height}">

            <style>
            @font-face{
                            font-family: Roboto;
                            src: url(Roboto-Regular.ttf);
                        }
                        .title {
                                fill: white;
                                font-size: 23px;
                                font-family: Roboto;
            }
            </style>

          <text x="45%" y="40%" text-anchor="middle" class="title">Roboto Regular</text>
          </svg>`;

const svgText3 = `
          <svg width="${width}" height="${height}">

          <style>
          @font-face{
                          font-family: Lato;
                          src: url(Lato-Regular.ttf);
                      }
                      .title {
                              fill: white;
                              font-size: 23px;
                              font-family: Lato;
          }
          </style>

        <text x="45%" y="40%" text-anchor="middle" class="title">Lato Regular</text>
        </svg>`;

const svgBuffer = Buffer.from(svgText);
const svgBuffer2 = Buffer.from(svgText2);
const svgBuffer3 = Buffer.from(svgText3);