how can I implement a font pairing feature?

I prototyped the Helmet-version. This assumes a display-component you want to include like so:

<FontsDemo
  body="Lato"
  heading="Raleway"
/>

The component behind this takes the typefaces from the props you pass to it, links the stylesheet for these fonts from Google Fonts, and shows some text (with the font family appended to the text):

import React from 'react'
import { Helmet } from 'react-helmet'

export default ({
  body,
  heading,
}) => {
  return (
    <React.Fragment>
      <Helmet>
        <link href={`https://fonts.googleapis.com/css2?family=${body.replace(' ', '+')}&family=${heading.replace(' ', '+')}&display=swap`} rel="stylesheet" />
      </Helmet>

      <h1 style={{ fontFamily: `${heading}` }}>
        Lorem impsum dolor sit amet ({heading})
      </h1>

      <p style={{ fontFamily: `${body}` }}>
        Consectetur adipiscing elit. Aliquam malesuada ex lectus, sit amet vulputate turpis malesuada vel. ({body})
      </p>
    </React.Fragment>
  )
}

Would that work for you?