How to Fix “Ensure text remains visible during webfont load bootstrap-icons.woff” Error in PageSpeed

Question

Ensure text remains visible during webfont load issue is not getting resolved in google pagespeed insights report even after adding font-display: swap to the CSS.

@font-face {
    font-display: swap;
    font-family: 'bootstrap-icons';
    src: url('../fonts/bootstrap-icons.woff') format('woff'), 
        url('../fonts/bootstrap-icons.woff2') format('woff2');
}

Answer 1

preload and font-display: swap; are used together then this problem is solved

<link href="../css/bootstrap-icons.css" rel="stylesheet preload" as="style" />

@font-face {
    font-display: swap;
    font-family: 'bootstrap-icons';
    src: url('../fonts/bootstrap-icons.woff') format('woff'), 
        url('../fonts/bootstrap-icons.woff2') format('woff2');
}