如何在GrapesJS加载时为排版模块添加自定义字体族

不需要修改GrapesJS源码，直接通过初始化配置就能在库加载阶段完成自定义字体族注入，全程不会有配置闪烁问题，具体操作步骤如下：

• 提前加载自定义字体资源
  编辑器初始化前就要保证字体资源可被访问，否则选中自定义字体后画布内无法正常渲染。可以在宿主页面的全局样式中提前定义字体，示例：

  /* 全局样式中提前引入自定义字体 */
  @font-face {
    font-family: 'BrandCustomFont';
    src: url('/static/fonts/BrandCustomFont.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
  }
  

  如果使用第三方字体服务，直接在页面head中引入对应的字体外链CSS即可。
• 初始化时在styleManager配置中追加字体选项
  很多人踩坑是找错了配置入口，自定义字体列表不需要单独注册，直接在排版（Typography）分类的font-family属性选项里追加即可，初始化传入的配置会在库加载阶段直接合并到内置配置中，不会出现加载后默认列表闪一下再替换成自定义列表的问题，示例代码：

  const editor = grapesjs.init({
    container: '#gjs-editor',
    // 其余你的原有基础配置保持不变
    styleManager: {
      sectors: [
        {
          name: 'Typography',
          open: true,
          properties: [
            {
              property: 'font-family',
              name: '字体',
              // 下拉选项列表，按需保留默认字体、追加自定义字体
              options: [
                // 内置默认字体，不需要的可以删除
                { value: 'Arial, sans-serif', name: 'Arial' },
                { value: 'Helvetica, sans-serif', name: 'Helvetica' },
                { value: 'Georgia, serif', name: 'Georgia' },
                { value: 'Times New Roman, serif', name: 'Times New Roman' },
                { value: 'Courier New, monospace', name: 'Courier New' },
                // 自定义字体项，name是下拉面板展示名称，value是实际生效的CSS font-family值
                { value: 'BrandCustomFont, sans-serif', name: '品牌自定义字体' },
                { value: 'SecondCustomFont, serif', name: '二号自定义字体' }
              ]
            },
            // 其余排版属性用extend继承内置配置即可，不需要重复写配置
            { extend: 'font-size' },
            { extend: 'font-weight' },
            { extend: 'letter-spacing' },
            { extend: 'color' },
            { extend: 'line-height' },
            { extend: 'text-align' },
            { extend: 'text-decoration' },
            { extend: 'font-style' },
            { extend: 'text-shadow' }
          ]
        }
      ]
    }
  });
  

避坑提示：不要在编辑器init完成后再通过editor.StyleManager.addProperty之类的API动态追加字体，这种方式属于加载完成后二次修改，不仅会出现短暂的默认列表闪烁，操作不当还会覆盖排版分类下的其他内置属性。

如果需要导出的页面也正常显示自定义字体，记得在导出HTML的逻辑里，把字体引入的CSS代码插入到导出文档的head标签中即可。

内容的提问来源于stack exchange，提问作者Asim Rasheed