Hello : I'd like to import multiple custom fonts into one fonts (otf) file using tailwind with the ability to reuse them without rehosting them. I have already looked at the doc but my case is not very well explained. I tried a code can you tell me if this is how it is done in the professional world:

- Creation of a file in the public for the fonts with the file for example Azonix.otf

- Creation of a
component fontLoader.js with the following code:

import localFont from 'next/font/local';

export const loadFont = (src, variable) => localFont({ src, variable });

export const loadFont1 = () => loadFont('/public/assets/fonts/Azonix.otf', '--font1');
export const loadFont2 = () => loadFont('/public/assets/fonts/Font2.otf', '--font2');

- configuration of the tailwind config file with the following code:

      fontFamily: {
        sans: ['var(--text)'],
      },

- using component for each page like this

import { loadFont1, loadFont2 } from './fontLoader';

export default function Home() {
  const font1 = loadFont1();
  const font2 = loadFont2();

  return (
    <main>
      <h1 className={`${font1.variable} font-sans`}>Text with Font 1</h1>
      <p className={`${font2.variable} font-sans`}>Text with Font 2</p>
  );
}