2

How can I add font-display:swap to following Luma icon fonts

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

It is loading from en_US/css/styles-m.css but I am not able to find this code in Magento lib or vendor default Magento2 themes

1 Answer 1

3

You'll need to edit the mixin that is used to create that CSS:

If you look in lib/web/css/source/lib/_typography.less you'll find:

.lib-font-face(
    @family-name,
    @font-path,
    @font-format: false,
    @font-weight: normal,
    @font-style: normal,
    @font-display: auto
) when not (@font-format = false) {
    @font-face {
        font-family: @family-name;
        src: url('@{font-path}.@{font-format}') format(@font-format);
        font-weight: @font-weight;
        font-style: @font-style;
        font-display: @font-display;
    }
}

Overwrite that file in your theme or create a new mixin/function to overwrite this one and include your CSS in there but please note this will apply to all uses of .lib-font-face.

You don't need to edit this but for the sake of understanding how this works:

  1. Font path variable (@icons__font-path) is declared in vendor/magento/theme-frontend-luma/web/css/source/_theme.less
  2. This is used in vendor/magento/theme-frontend-blank/web/css/source/_icons.less to add the fonts, and because the variable was overridden above it pulls in the Luma fonts using the .lib-font-face mixin/function I mentioned.
5
  • Thanks , I will try this out and let you know the outcome , When you say it will apply to all uses of .lib-font-face , do you see any potential issue that can break the frontend ? Jun 3, 2020 at 15:42
  • Not really, it's unlikely that will cause issues and even if it does it's hardly used on the frontend.
    – Ben Crook
    Jun 3, 2020 at 15:48
  • 1
    Thanks Ben , Its working fine Jun 4, 2020 at 12:25
  • Glad I could help :)
    – Ben Crook
    Jun 4, 2020 at 13:27
  • @Pravin how did you override that mixin?
    – Tora
    Oct 28, 2020 at 15:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.