After running site audits with Google Insights and Lighthouse I am getting the following:
Ensure text remains visible during webfont load
Leverage the font-display CSS feature to ensure text is user-visible
while webfonts are loading. Learn more.FCPLCP
Magento Specify @font-display when defining custom fonts.
URL Potential Savings
…font/porto-icons.woff2 (www.mydomain) 20 ms
…v34/memvYaGs1….woff2(fonts.gstatic.com) 10 ms
…v49/TK3iWkUHH….woff2(fonts.gstatic.com) 10 ms
…v34/memtYaGs1….woff2(fonts.gstatic.com) 0 ms
…v18/KFOmCnqEu….woff2(fonts.gstatic.com) 0 ms
…v18/KFOlCnqEu….woff2(fonts.gstatic.com) 0 ms
…v18/KFOmCnqEu….woff2(fonts.gstatic.com) 0 ms
…v18/KFOlCnqEu….woff2(fonts.gstatic.com) 0 ms
…v18/KFOlCnqEu….woff2(fonts.gstatic.com) 0 ms
After researching this I have looked at the _typography.less file and found the follwoing to already have the “@font-display: swap” listed as below. In the code below I do not see any .woff2 fonts listed. I am trying to get this resolved and cleared from Google Insights
/srv/public_html/var/view_preprocessed/pub/static/frontend/Smartwave/porto/en_US/css/source
// Common
// _____________________________________________
& when (@media-common = true) {
.lib-font-face(
@family-name: @font-family-name__base,
@font-path: ‘@{baseDir}fonts/opensans/light/opensans-300’,
@font-weight: 300,
@font-style: normal,
@font-display: swap
);
.lib-font-face(
@family-name: @font-family-name__base,
@font-path: ‘@{baseDir}fonts/opensans/regular/opensans-400’,
@font-weight: 400,
@font-style: normal,
@font-display: swap
);
.lib-font-face(
@family-name: @font-family-name__base,
@font-path: ‘@{baseDir}fonts/opensans/semibold/opensans-600’,
@font-weight: 600,
@font-style: normal,
@font-display: swap
);
.lib-font-face(
@family-name: @font-family-name__base,
@font-path: ‘@{baseDir}fonts/opensans/bold/opensans-700’,
@font-weight: 700,
@font-style: normal,
@font-display: swap
);
}
//
// Desktop
// _____________________________________________
.media-width(@extremum, @break) when (@extremum = ‘min’) and (@break
= @screen__m) {
h1 {
.lib-css(font-size, @h1__font-size-desktop);
.lib-css(margin-bottom, @h1__margin-bottom__desktop);
}
}
//
// Common
// _____________________________________________
& when (@media-common = true) {
.items {
.lib-list-reset-styles();
}
I also looked up one of the links from Google Insights to look at the file to see if I could edited it and could not open it. It is located in the following folder pub/static/frontend/Smartwave/porto/en_US/icon-fonts/font porto.woff2