Css 字体显示不修复页面速度问题

我正在努力提高我的网站的性能，我从Google Page Speed Insights给我的建议开始

但我似乎无法解决这个问题：

建议在此页面上使用

font-display

CSS属性-

我已经这样做了：

@font-face {
  font-family: 'Malaga OT Reg';
  font-display: swap;
  src: url('./MalagaOT-Reg.eot');
  src: url('./MalagaOT-Reg.eot?#iefix') format('embedded-opentype'),
    url('./MalagaOT-Reg.woff2') format('woff2'), url('./MalagaOT-Reg.woff') format('woff'),
    url('./MalagaOT-Reg.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Museo Sans Rounded';
  font-display: swap;
  src: url('./MuseoSansRounded-300.eot');
  src: url('./MuseoSansRounded-300.eot?#iefix') format('embedded-opentype'),
    url('./MuseoSansRounded-300.woff2') format('woff2'),
    url('./MuseoSansRounded-300.woff') format('woff'),
    url('./MuseoSansRounded-300.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Museo Sans Rounded';
  font-display: swap;
  src: url('./MuseoSansRounded-900.eot');
  src: url('./MuseoSansRounded-900.eot?#iefix') format('embedded-opentype'),
    url('./MuseoSansRounded-900.woff2') format('woff2'),
    url('./MuseoSansRounded-900.woff') format('woff'),
    url('./MuseoSansRounded-900.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Museo Sans Rounded';
  font-display: swap;
  src: url('./MuseoSansRounded-700.eot');
  src: url('./MuseoSansRounded-700.eot?#iefix') format('embedded-opentype'),
    url('./MuseoSansRounded-700.woff2') format('woff2'),
    url('./MuseoSansRounded-700.woff') format('woff'),
    url('./MuseoSansRounded-700.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Museo Sans Rounded';
  font-display: swap;
  src: url('./MuseoSansRounded-100.eot');
  src: url('./MuseoSansRounded-100.eot?#iefix') format('embedded-opentype'),
    url('./MuseoSansRounded-100.woff2') format('woff2'),
    url('./MuseoSansRounded-100.woff') format('woff'),
    url('./MuseoSansRounded-100.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'Museo Sans Rounded';
  font-display: swap;
  src: url('./MuseoSansRounded-500.eot');
  src: url('./MuseoSansRounded-500.eot?#iefix') format('embedded-opentype'),
    url('./MuseoSansRounded-500.woff2') format('woff2'),
    url('./MuseoSansRounded-500.woff') format('woff'),
    url('./MuseoSansRounded-500.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Museo';
  font-display: swap;
  src: url('./Museo-700.eot');
  src: url('./Museo-700.eot?#iefix') format('embedded-opentype'),
    url('./Museo-700.woff2') format('woff2'), url('./Museo-700.woff') format('woff'),
    url('./Museo-700.ttf') format('truetype'), url('./Museo-700.svg#Museo-700') format('svg');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Museo';
  font-display: swap;
  src: url('./Museo500-Regular.eot');
  src: url('./Museo500-Regular.eot?#iefix') format('embedded-opentype'),
    url('./Museo500-Regular.woff2') format('woff2'), url('./Museo500-Regular.woff') format('woff'),
    url('./Museo500-Regular.ttf') format('truetype'),
    url('./Museo500-Regular.svg#Museo500-Regular') format('svg');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Museo';
  font-display: swap;
  src: url('./Museo900-Regular.eot');
  src: url('./Museo900-Regular.eot?#iefix') format('embedded-opentype'),
    url('./Museo900-Regular.woff2') format('woff2'), url('./Museo900-Regular.woff') format('woff'),
    url('./Museo900-Regular.ttf') format('truetype'),
    url('./Museo900-Regular.svg#Museo900-Regular') format('svg');
  font-weight: 900;
  font-style: normal;
}

但这并没有对PageSpeed报告产生影响。我尝试了

字体显示

属性的

交换

和

回退

值

---

有人能为我如何解决这个问题提供建议吗？

根据我的经验，它与

字体显示：swap

但是PSI报告可能需要几天才能注意到您的改进，尤其是移动设备

删除woff2并仅保留woff格式

设置字体显示属性为块

字体显示：块

您还可以选择删除tiff和eot引用，以加快站点速度

---

嘿，我也有同样的问题。然后，我将这段代码添加到我的style.css和我的主题的Customize>additional css部分，Google停止触发这些警告：

@font-face {
  font-family: "Open Sans Regular";
  src: url("https://fonts.googleapis.com/css2?family=Open+Sans");
  font-display: swap;
}

---

font-display:可选的

应该可以。刚刚尝试过。可悲的是，它没有帮助：（奇怪的是，看到值为

swap

、

optional

和

fallback

的

字体显示属性不会导致FOIT（不可见文本的闪烁）。只有
字体显示：block
会导致FOIT。可以找到更多信息