.lib-font-face mixin - Fixed font formats

[BenSpace48]

The .lib-font-face() mixin is not very flexible as it requires you have the font in all the formats listed (eot, woff2, woff, ttf, and svg). If your font is not available in all these formats then you will run into problems with 404 errors.

For example the font I'm using isn't available as a Woff or Woff2 file so I can't use the .lib-font-face() mixin as it leaves me with several 404s:

Steps to reproduce

1. Use a font that doesn't contain a Woff/Woff2 variant
2. Check the console in your browser:

// Regular Noto Sans
.lib-font-face(
    @family-name: @font-family-name__base,
    @font-path: '@{baseDir}fonts/NotoSans-Regular',
    @font-weight: 400,
    @font-style: normal
);

// Italic Noto Sans
.lib-font-face(
    @family-name: @font-family-name__base,
    @font-path: '@{baseDir}fonts/NotoSans-Italic',
    @font-weight: 400,
    @font-style: italic
);

// Bold Noto Sans
.lib-font-face(
    @family-name: @font-family-name__base,
    @font-path: '@{baseDir}fonts/NotoSans-Bold',
    @font-weight: 700,
    @font-style: normal
);

Expected result

1. I'd expect to have the option to specify the font formats I'd like to us, default should be all the fonts as it currently is but the option to exclude formats would be good.

Maybe (optionally) setting a variable to false could be the answer?

.lib-font-face(
    @family-name: @font-family-name__base,
    @font-path: '@{baseDir}fonts/NotoSans-Bold',
    @font-weight: 700,
    @font-style: normal,
    @eot: false,
    @woff: false,
    @woff2: false
);

Actual result

1. The mixin attempts to retrieve all the font formats which leaves 404 errors.

Workaround

To get around this I've had to manually declare my fonts without using the mixin.

// Regular Noto Sans
@font-face {
    font-family: @font-family-name__base;
    src: url('@{baseDir}fonts/NotoSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

// Italic Noto Sans
@font-face {
    font-family: @font-family-name__base;
    src: url('@{baseDir}fonts/NotoSans-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

// Bold Noto Sans
@font-face {
    font-family: @font-family-name__base;
    src: url('@{baseDir}fonts/NotoSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

And I no longer get the 404s

[undefined-olha]

@BenSpace48 thank you! That's a really good point. Internal ticket MAGETWO-54520 created.

[TiEul]

An alternative workaround is to simply create the WOFF2 files for your font. There are plenty of free tools available which are able to convert TTF and other font formats into WOFF2, which may be a cleaner long-time solution if you are facing this problem now and comes with the upside of slightly decreasing the load times for your users through the reduced file size offered by WOFF2. Just make sure the font you are using permits / does not specifically prohibit this sort of conversion in its license agreement.

[BenSpace48]

@TiEul Thanks for the suggestion, but unfortunately the fonts are out of our control as they are purchased by a client and the licence does not permit it. Also I don't think it's a good idea that a mixin should be so opinionated, in my eyes it should be as flexible as possible.

[TiEul]

Oh, don't get me wrong, I fully agree that the mixin should not be that limited, it was more a suggestion for other people finding this issue, as I actually initially got here via Google since I was facing the same problem.