<GoogleFont> demo

GoogleFont.tsx

import { FC } from "react";

interface GoogleFontProps {
  family: string;
  weights?: (100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900)[];
}

/**
 * Automatically generate <link> elements for the specified Google Fonts.
 */
export const GoogleFont: FC<GoogleFontProps> =
  ({ family, weights = [400, 800] }) => {
    const href =
      `https://fonts.googleapis.com/css2?family=${
        family.replace(/ /g, "+")
      }${
        weights.length
          ? `:wght@${weights.join(";")}`
          : ""
      }&display=swap`;

    return (
      <link rel="stylesheet" href={href} />
    );
  };