如何在Form-io中为RTL表单全局修改字体？

问题根源分析 #

• 字体URL错误：你使用的GitHub blob链接是网页地址，并非字体文件的直接下载链接，浏览器无法正确加载字体资源。
• CSS优先级不足：Form.io自带的默认样式优先级高于自定义类，导致字体设置被覆盖。
• 未全局应用样式：单独的sample类需要手动添加到每个元素，无法批量作用于所有表单组件。

简单全局解决方案 #

步骤1：修正字体加载链接 #

将@font-face中的GitHub链接替换为原始文件直链（GitHub的raw地址）：

@font-face {
    font-family: 'Vazirmatn-Black';
    src: url('https://raw.githubusercontent.com/rastikerdar/vazirmatn/master/fonts/ttf/Vazirmatn-Black.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

步骤2：全局覆盖表单所有元素 #

直接针对Form.io的根容器设置字体，确保样式优先级足够，无需手动添加类：

/* 作用于Form.io表单的所有元素 */
.formio-container,
.formio-container * {
    font-family: 'Vazirmatn-Black', sans-serif !important;
}

/* 保留RTL布局设置 */
.formio-container {
    direction: rtl;
    text-align: right;
}

步骤3：在Form.io中应用自定义CSS #

将上述CSS代码粘贴到Form.io表单设置的Custom CSS（外观设置区域），样式会自动作用于所有表单组件。

验证要点 #

• 打开浏览器控制台的「Network」标签，确认字体文件无404错误，已成功加载。
• 若字体仍不生效，可在font-family后添加通用字体（如sans-serif）作为降级选项。

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