使用Monotype订阅字体时，如何修改font-display为block以实现FOIT

我使用Monotype字体订阅服务，其样式表中font-display默认设为swap，导致页面出现FOUT（无样式文本闪烁）。我希望将font-display改为block来实现FOIT（不可见文本闪烁），但Monotype平台没有提供修改该属性的选项。

我曾尝试在自己的样式表中给元素添加font-display: block，但浏览器开发者工具提示“unknown property name”错误。

现有Monotype样式表配置 #

页面<head>中的引入代码：

<link rel="preconnect" href="https://cdn.fonts.net">
<link href="https://cdn.fonts.net/kit/xxxxx.css" rel="stylesheet" />

通过浏览器开发者工具查看，Monotype样式表内容如下：

/* @import must be at top of file, otherwise CSS will not work */
@import url("https://cdn.fonts.net/t/1.css?apiType=css&projectid=xxxxx");
@font-face {
    font-family: "BentonSansProRegular";
    font-style: normal;
    font-stretch: normal;
    font-display: swap;
    src: url('BentonSansPro/BentonSansProRegular_normal_normal.woff2') format('woff2'), url('BentonSansPro/BentonSansProRegular_normal_normal.woff') format('woff');
}

自定义样式表尝试及问题 #

我克隆了Monotype的样式表，将font-display改为block后部署到自己的服务器，但字体未正常加载，页面仅显示回退字体。相关代码如下：

页面头部引入代码 #

<link rel="preconnect" href="https://cdn.fonts.net">
<link href="https://www.xyz.co.uk/assets/fonts.css" rel="stylesheet">

自定义样式表代码 #

/* @import must be at top of file, otherwise CSS will not work */
@import url("https://cdn.fonts.net/t/1.css?apiType=css&projectid=xxxxx");
@font-face {
    font-family: "BentonSansProRegular";
    font-style: normal;
    font-stretch: normal;
    font-display: block;
    src: url('https://cdn.fonts.net/t/1.css?apiType=css&projectid=xxxxx/BentonSansPro/BentonSansProRegular_normal_normal.woff2') format('woff2'), url('https://cdn.fonts.net/t/1.css?apiType=css&projectid=xxxxx/BentonSansPro/BentonSansProRegular_normal_normal.woff') format('woff');
}

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