Rainbow Text using enchanted land font

RainbowText.jsx

import localFont from 'next/font/local';

const enchantedLandFont = localFont({ src: './enchanted-land.ttf' });

const headerStyle = (colors) => ({
  display: 'inline',
  margin: 0,
  fontSize: 500,
  fontWeight: 400,
  background: `-webkit-linear-gradient(left, ${colors.join(', ')})`,
  '-webkit-background-clip': 'text',
  '-webkit-text-fill-color': 'transparent',
});

const headerStyle1 = headerStyle(['red', 'orange', 'yellow', 'green', 'blue', 'purple']);
const headerStyle2 = headerStyle(['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']);

export default function CocktailPartyJson() {
  return (
    <>
      <main className={enchantedLandFont.className}>
        <div>
          <h1 style={headerStyle1}>
            Arcanum
          </h1>
        </div>
        <div>
          <h1 style={headerStyle2}>
            Arcanum
          </h1>
        </div>
      </main>
    </>
  );
}