Issue with Ensure text remains visible during webfont load in Porto Theme

Viewed 13

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();

}

0 Answers
Related