Question

In PageSpeed Insights:
Ensure text remains visible during Webfont load
Leverage the font-display CSS feature to ensure text is user-visible while web fonts are loading.

Blank-Theme-Icons/Blank-Theme-Icons.woff2
I want to use this font in my custom theme and adding

font-display :swap
Was it helpful?

Solution

Include the Blank-Theme-Icons.woff2 font in your CSS file by adding below lines in your theme's CSS file.

@font-face {
  font-family: 'icons-blank-theme';
  src: url('../fonts/Blank-Theme-Icons/Blank-Theme-Icons.woff2') format('woff2'), url('../fonts/Blank-Theme-Icons/Blank-Theme-Icons.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

Hope it helps!!!

OTHER TIPS

Create new file _icons.less (app/design/frontend///web/css/source/_icons.less)

And paste this code

// /**
//  * Copyright © Magento, Inc. All rights reserved.
//  * See COPYING.txt for license details.
//  */

& when (@media-common = true) {
    .lib-font-face(
        @family-name: @icons__font-name,
        @font-path: @icons__font-path,
        @font-weight: normal,
        @font-style: normal,
        @font-display: swap
    );
}
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top