NextJS中react-quill自定义字体功能失效问题求助

我在Next.js中无法让react-quill的自定义字体功能正常工作，尝试过相关解决方案，但自定义属性似乎未被正确处理。

初始尝试的代码示例 #

动态加载react-quill #

const ReactQuill = dynamic(
  import('react-quill').then((mod) => {
    const Quill = mod.default.Quill;
    var Font = Quill.import('formats/font');
    Quill.register(Font, true);
    return mod;
  }),
  { ssr: false } 
);

模块配置 #

const modules = {
  toolbar: [
    [
      {
        font: [
          'monospace',
          'serif',
          'raleway',
          'montserrat',
          'lato',
          'rubik',
          'roboto'        
          ],
      },
    ],
  ],
};

组件使用 #

<ReactQuill
  theme="snow"
  value={value}
  modules={modules}
  bounds={'.app'}
  formats={formats}
  onChange={(content) => {
    console.log(content);
  }}
/>

引入的字体及样式CSS #

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap');

/* Set content font-families */
.ql-font-Roboto {
  font-family: 'Roboto';
}
.ql-font-Raleway {
  font-family: 'Raleway';
}
.ql-font-Montserrat {
  font-family: 'Montserrat';
}
.ql-font-Lato {
  font-family: 'Lato';
}
.ql-font-Rubik {
  font-family: 'Rubik';
}

问题现象 #

所有字体仍显示为'Sens Serif'（推测是回退字体）。尝试相关CSS技巧后，能显示正确字体名称，但除了默认三种字体（serif、monospace、sans serif），切换其他字体时onChange事件不会触发。

尝试过的其他方案（设置字体白名单） #

我还尝试在动态加载时设置字体白名单，但也没有效果：

const ReactQuill = dynamic(
  import('react-quill').then(async (mod) => {
    const { default: RQ } = await import('react-quill');

    var Font = RQ.Quill.import('formats/font');
    Font.whitelist = [
      'monospace',
      'serif',
      'raleway',
      'montserrat',
      'lato',
      'rubik',
      'roboto'
    ];

    const modules = {
      toolbar: [[{ font: Font.whitelist }]],
    };

    RQ.Quill.register(Font, true);
    
    return ({ forwardedRef, ...props }) => (
      <RQ modules={modules} ref={forwardedRef} {...props} />
    );
  }),
  { ssr: false } // 禁用服务端渲染
);

请问有人成功在Next.js中正常使用react-quill的自定义字体功能吗？

内容的提问来源于stack exchange，提问作者Erik Per Magnusson