TinyMCE字体族预览：自定义字体初始化配置技术咨询

Hey there! It looks like you've already got a solid start with your TinyMCE configuration—adding custom fonts via font_formats and linking a custom CSS file is exactly the right direction. Let's dive into how to make sure those custom fonts show up correctly in the font dropdown preview and content area.

Your Current Configuration #

tinyMCE.init({
  selector: '#htmleditor',
  theme: 'modern',
  width: '100%',
  height: 500,
  fontsize_formats: "4pt 6pt 8pt 10pt 12pt 14pt 18pt 24pt 36pt",
  content_css: ['fonts/CI.css'],
  font_formats: '[*DEFAULTFONTLISTOMITTED*] + NewFont1=NewFont1,NewFont1;NewFont2=NewFont2,Impact;NewFont3=NewFont3,NewFont3;',
});

Critical Steps for Working Font Previews #

1. Verify Your @font-face Rules in CI.css

The content_css file needs properly defined @font-face rules to load your custom fonts. Make sure each font's font-family name exactly matches what you used in font_formats (this is case-sensitive!). For example:

/* Inside fonts/CI.css */
@font-face {
  font-family: 'NewFont1'; /* Must match the first value in NewFont1=... */
  src: url('NewFont1.woff2') format('woff2'),
       url('NewFont1.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'NewFont2';
  src: url('NewFont2.woff2') format('woff2');
  /* Using Impact as a fallback is fine, but ensure the primary font loads first */
}

2. Clean Up the font_formats Syntax

Your current format has redundant values (e.g., NewFont1=NewFont1,NewFont1). The second value in each entry is the fallback font stack—use a logical fallback instead, and ensure the first value matches your @font-face font-family:

font_formats: '[*DEFAULTFONTLISTOMITTED*] + NewFont1=NewFont1, Arial, sans-serif;NewFont2=NewFont2, Impact, sans-serif;NewFont3=NewFont3, Georgia, serif;',

3. Load Fonts for the TinyMCE UI (Not Just Content Area)

The font dropdown preview is part of TinyMCE's UI, not the content iframe. That means your custom fonts need to be loaded in the main page's CSS (not just content_css) so the dropdown can render them. You can either:

• Add the same @font-face rules to your main site CSS, or
• Use TinyMCE's setup callback to inject the font styles into the UI dynamically:

tinyMCE.init({
  // ... your existing config ...
  setup: function(editor) {
    editor.on('init', function() {
      const style = document.createElement('style');
      style.textContent = `
        @font-face {
          font-family: 'NewFont1';
          src: url('fonts/NewFont1.woff2') format('woff2');
        }
        /* Repeat for NewFont2 and NewFont3 */
      `;
      document.head.appendChild(style);
    });
  }
});

4. Validate File Paths

Double-check that:

• content_css: ['fonts/CI.css'] points to the correct location relative to your page (not the TinyMCE script file).
• The font files referenced in CI.css are in the right place (e.g., fonts/NewFont1.woff2 exists and is accessible via your browser).

Troubleshooting Checklist #

• Open your browser's DevTools > Network tab: Confirm CI.css and all font files load without 404 errors.
• Check the Console tab for any font-loading errors (e.g., cross-origin restrictions if fonts are hosted on another domain).
• Clear your browser cache—fonts can get stuck in cached states that prevent proper loading.
• Test in multiple browsers: Some browsers handle font formats differently (woff2 is widely supported, but include woff as a fallback for older browsers).

内容的提问来源于stack exchange，提问作者Ignacio Ara