0

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

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.
| improve this answer | |
  • 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 ? – Pravin Jun 3 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 at 15:48
  • 1
    Thanks Ben , Its working fine – Pravin Jun 4 at 12:25
  • Glad I could help :) – Ben Crook Jun 4 at 13:27
0

Can you please tell, how to override _typography.less file in the theme? Need to override the whole file or override only the above code for "font-display: swap" for luma icons CSS.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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