Satori で Google Fonts を使う

satori-google-fonts.jsx

import satori from 'satori'
import fs from 'fs'

// fetch font information
const endpoint = new URL('https://www.googleapis.com/webfonts/v1/webfonts');
endpoint.searchParams.set('family', 'M PLUS Rounded 1c');
endpoint.searchParams.set('key', process.env.GOOGLE_FONTS_API_KEY);
const fontInfo = await fetch(endpoint).then(res => res.json());

// fetch font
const fontResponse = await fetch(fontInfo.items[0].files['regular']);
const fontBuffer = await fontResponse.arrayBuffer();

const svg = await satori(
  <div style={{ 
    alignItems: 'center', 
    justifyContent: 'center', 
    background: 'lightgray',
    width: '100%',
    height: '100%',
    fontSize: 32,
  }}>
    Hello, Google Fonts!
  </div>,
  {
    width: 600,
    height: 400,
    fonts: [
      {
        name: 'M PLUS Rounded 1c',
        data: fontBuffer,
      },
    ],
  },
)

fs.writeFileSync('output.svg', svg);