[英]font-display not fixing Page Speed Insights issue
I am trying to improve the performance of my website and I am starting with the suggestions that Google Page Speed Insights is giving me.我正在努力提高我网站的性能,我从 Google Page Speed Insights 给我的建议开始。
I seem unable to solve this issue though:我似乎无法解决这个问题:
It suggests using the font-display
CSS property on this page - https://developers.google.com/web/updates/2016/02/font-display它建议在此页面上使用font-display
CSS 属性 - https://developers.google.com/web/updates/2016/02/font-display
I have done this:我已经这样做了:
@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;
}
But it has not made a difference to the PageSpeed report.但它并没有对 PageSpeed 报告产生影响。 I have tried both swap
and fallback
values for the font-display
property.我已经尝试了font-display
属性的swap
和fallback
值。
Is anyone able to offer any advice for how I can solve this issue?有没有人能够就我如何解决这个问题提供任何建议?
In my experience it works with font-display: swap;
根据我的经验,它适用于font-display: swap;
but it may take days for the PSI report to note your improvement, especially Mobile.但 PSI 报告可能需要几天时间才能注意到您的改进,尤其是移动设备。
set font-display property to block;将 font-display 属性设置为阻止;
font-display: block;字体显示:块;
Optionally you can remove tiff and eot reference as well to speed up the site. (可选)您也可以删除 tiff 和 eot 引用以加快站点速度。
hey I was having exact same issues.嘿,我遇到了完全相同的问题。 Then I added this piece of code to my style.css and the customise > additional css sections of my theme and Google stopped firing those warnings:然后我将这段代码添加到我的 style.css 和我的主题的自定义 > 附加 css 部分,谷歌停止触发这些警告:
@font-face {
font-family: "Open Sans Regular";
src: url("https://fonts.googleapis.com/css2?family=Open+Sans");
font-display: swap;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.