在Django Admin的TinyMCE API中添加自定义字体遇问题求助

1. 确认font_formats配置格式正确 #

严格遵循 字体显示名=字体名, 回退字体; 的结构，注意逗号后需加空格，示例：

tinymce.init({
  font_formats: 'Montserrat=Montserrat, sans-serif; Arial=arial,helvetica,sans-serif; Verdana=verdana,geneva'
});

若字体名含空格（如'Montserrat Alternates'），需用单引号包裹：'Montserrat Alternates'='Montserrat Alternates', sans-serif;

2. 直接在TinyMCE的content_style中导入字体 #

TinyMCE运行在独立iframe中，全局字体无法穿透至iframe，直接在content_style里导入是最可靠的方式：

tinymce.init({
  content_style: `
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
    /* 强制覆盖编辑器默认样式 */
    .mce-content-body span[style*="font-family: Montserrat"] {
      font-family: 'Montserrat', sans-serif !important;
    }
  `
});

如果用本地字体，确保文件路径是iframe可访问的绝对路径，示例：

@font-face {
  font-family: 'Montserrat';
  src: url('/static/fonts/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400;
}

3. 检查编辑器HTML源码与字体加载状态 #

• 选中文字应用Montserrat后，切换到编辑器「源码模式」，确认生成的HTML包含正确样式：<span style="font-family: 'Montserrat', sans-serif;">测试文字</span>
• 打开浏览器开发者工具，找到TinyMCE的iframe（Elements面板中id含tinymce的节点），在Console执行：

  document.fonts.check('16px Montserrat')
  

  返回false则说明字体未加载成功，需检查URL正确性、本地静态文件配置或跨域限制。

4. 规避Django Admin样式干扰 #

Django Admin全局样式可能覆盖编辑器样式，确保自定义样式优先级足够高，比如给字体规则加!important，或在content_style中明确针对编辑器内容区域设置样式。

内容的提问来源于stack exchange，提问作者Zaeem Akhtar