Ensure text remains visible during webfont load: Doesn't work on added fonts

Question

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.

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.

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?

Answer 1

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
);