How to add custom fonts in Quill text-editor in nextjs

Question

I am working in next.js to create a text editor using react-quill. I have implemented whole text editor in my project. There were two main issues in my project.

First one is that when I paste anything into the editor by copying from other site, it also pastes the background, but I want that all the styling remains live in the pasted text and just the background color does not shown.

Second one, is that is that I am not able to add custom fonts in the font option of the text editor. By default it is only showing me default options including 'Sans Sarif, Sarif and MonaSans'. But when I try to add more fonts in it, than it shows me only 'Sans Sarif' in place of all custom fonts which I added.

I have solved the first one by installing the old versions of the quill libraries instead of the latest versions:

"quill": "^1.3.7",
"quill-better-table": "^1.2.10",
"quill-table-module": "^1.0.1",
"quilljs": "^0.18.1",
"react-quill": "^2.0.0",
"react-quill-new": "^3.3.3",
"react-quilljs": "^1.2.17",

But the now the main issue is the Second one. I am unable to add custom fonts in the quill text editor in nextjs.

Github repo

It would be very helpful if you give solution through this repository.

This is Editor.tsx:

'use client'
import Quill from "quill";
import "quill/dist/quill.snow.css";
import { useQuill } from "react-quilljs";
export default function Editor() {
  var Font = Quill.import('formats/font');
Font.whitelist = ['Ubuntu', 'Raleway', 'Roboto', 'Mirza'];
Quill.register(Font, true);
  
  const { quill, quillRef } = useQuill({
    theme: 'snow', // Default theme
    modules: {
      toolbar: [
        ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
        ['blockquote', 'code-block'],
        ['link', 'image', 'video', 'formula'],
      
        [{ 'header': 1 }, { 'header': 2 }],               // custom button values
        [{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],
        [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
        [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
        [{ 'direction': 'rtl' }],                         // text direction
      
        [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
      
        [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
        [{ 'font': Font.whitelist }],
        [{ 'align': [] }],
        ['clean'],
        ['insertHorizontalLine'],                                      // remove formatting button
      ],
    },
  });


  return (
    <div style={{ width: 1000, height: 300 }}>
      <div ref={quillRef} />
    </div>
    
  );
}

'@/app/global.tsx':

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

@font-face{
  font-family: "textual";
  src: url("../../public/font/textual.ttf")
}
@font-face{
  font-family: "roboto";
  src: url("../../public/font/Roboto-Black.ttf");
}
body {
  color: var(--foreground);
  background: var(--background);
  font-family: Arial, Helvetica, sans-serif;
}

.textual{
  font-family: "textual";
}
.roboto{
  font-family: "roboto";
}
.ql-font-roboto{
  font-family: "roboto";
}
.ql-editor {
    font-family: '__ManropeFont_e02189', '__ManropeFont_Fallback_e02189' !important;
}

'@/app/page.tsx':

'use client'

import Editor from "@/components/Editor";
import { useState } from "react";
export default function Home() {
const [isRoboto, setIsRoboto] = useState(false);

  return (
   <main>
    <br />
    <Editor/>
   </main>
  );
}

I searched on here on stackOverflow and I get same questions and their answers but they were asked and solved in context of js. But I am working on Nextjs. I applied all the solutions in my project but can't find solution. I also tried hard to get help from AI by using chatgpt or gemini but can't get solution.

I have tried this and many other solutions like it, but can not get solution:

const font = Quill.import('attributors/style/font');
font.whitelist = ['asap', 'podkova'];
Quill.register(font, true);

I also used dynamic, but get solution. I also used different solution approaches like by using dynamic function from next. And also I try to solve by applying css classes and also applied other different solutions available.