1

In our Magento build we have a custom theme that uses Luma as a parent.

After doing an Audit in Chrome we get the message Ensure text remains visible during webfont load and it lists the following.

enter image description here

After following instructions online I add the font-display: swap; rule in to app/design/frontend/THEME/VENDOR/web/css/source/lib/_typography.less which results to the below.

enter image description here

The two remaining fonts are ones that I've added inside of app/design/frontend/THEME/VENDOR/web/css/source/lib/_typography.less

.lib-font-face(
    @family-name:'Hurme Geometric Sans 4',
    @font-path: '@{baseDir}fonts/HurmeGeometricSans4/HurmeGeometricSans4SemiBold',
    @font-weight: 600
);

.lib-font-face(
    @family-name:'Hurme Geometric Sans 4 regular',
    @font-path: '@{baseDir}fonts/HurmeGeometricSans4/HurmeGeometricSans4-Regular',
    @font-weight: 500
);

.lib-font-face(
    @family-name:'Hurme Geometric Sans 4 light',
    @font-path: '@{baseDir}fonts/HurmeGeometricSans4/HurmeGeometricSans4-Light',
    @font-weight: 400
);

.lib-font-face(
    @family-name: 'review-stars',
    @font-path: '@{baseDir}fonts/ReviewStars/icomoon',
    @font-weight: normal
);

The fonts work but still I get that message. Can anyone please help me?

1 Answer 1

2

First correct path file _typography.less should be

app/design/frontend/yourTHEME/VENDOR/web/css/source/_typography.less


you need add font like below
.lib-font-face(
   @family-name: 'review-stars',
   @font-path: '@{baseDir}fonts/ReviewStars/icomoon',
   @font-weight: normal,
   @font-style: normal,
   @font-display: swap
);
3
  • Thank you. Since I logged the issue I was able to resolve it by adding it to the correct file like you suggested. Marking this as the correct answer.
    – Gezzasa
    Jul 9, 2020 at 13:30
  • 1
    Glad it help you. One more thing you should extend blank theme of magento. It's more stable and seem have better support from magento team than luma. It's up to you
    – mrtuvn
    Jul 9, 2020 at 15:13
  • Thanks for the tip. That's actually my next project to change the parent to Blank instead of Luma.
    – Gezzasa
    Jul 10, 2020 at 9:17

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.