Theme: Failed to decode font

[KOliver94]

Describe the bug

The fonts are not loaded properly with the new 10.7.0 version and I see the following warnings in the console. The browser uses a fallback font as Inter could not be loaded.

Failed to decode downloaded font: http://localhost:5174/node_modules/primereact/resources/themes/lara-light-blue/fonts/Inter-roman.var.woff2?v=3.19
OTS parsing error: Failed to convert WOFF 2.0 font to SFNT

Failed to decode downloaded font: http://localhost:5174/node_modules/primereact/resources/themes/lara-light-blue/fonts/Inter-italic.var.woff2?v=3.19
OTS parsing error: Size of decompressed WOFF 2.0 is less than compressed size

Reproducer

No response

PrimeReact version

10.7.0

React version

18.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

Chrome 126.0.6478.127

Steps to reproduce the behavior

1. Open any StackBlitz project and use PrimeReact version 10.7.0.
2. Check the console for warnings
3. Verify the fonts are not loaded properly and a fallback font is used (Chrome uses Arial as fallback)

Expected behavior

Fonts loaded properly as in earlier versions.

[melloware]

@onursenture can you help here this looks like something is invalid with the theme or font.

The error "Failed to convert WOFF 2.0 font to SFNT" typically occurs when there is an issue converting a Web Open Font Format version 2.0 (WOFF 2.0) font file to a standard TrueType or OpenType font (SFNT). SFNT stands for "Spline Font" and is a font file format used for TrueType and OpenType fonts.

This error can occur for several reasons:

Corrupt Font File: The WOFF 2.0 file might be corrupted or improperly formatted.
Unsupported Features: The conversion tool or software might not support certain features or structures present in the WOFF 2.0 file.
Compatibility Issues: There might be compatibility issues between the font file and the tool or software attempting the conversion.
Software Bugs: There could be bugs or limitations in the software performing the conversion.

[YellowLime77]

I'm having the same problem with the default Lara themes, so I switched to Viva. Unfortunately, there are new yet similar errors:

[lekhnath]

Same here. Screenshot attached.

[zeltrex7]

I got the same error with primereact version 10.7.0 . i just downgraded the version to 10.5.0 now it seems to be showing no error and working fine. seems like in version 10.7.0 the fonts are corrupted since i cannot preview them in extension or browser which is not the case in 10.5.0. .

[KOliver94]

Hey guys,

It's still in issue in version 10.8.0. I think it's a pretty big problem as none of the default themes work properly. Can you please try to fix it?

Reproducation environment with the newly released version: https://stackblitz.com/edit/kcrywb?file=package.json

[melloware]

@onursenture ping...

[onursenture]

@onursenture ping...

I've updated the Inter font: 91d18f0

Could you verify if the issue is fixed?

[KOliver94]

Hey @onursenture,

I've built primereact locally and installed it to my project. You can see it tries to load the new fonts but still fails.

[KOliver94]

As I was already there I narrowed down the cause of the issue to this commit d3da717. The new gulp major version introduced a change with encoding which breaks fonts by default. See related issues: gulpjs/gulp#2797, gulpjs/gulp#2790

I opened a PR with the fix: #6977

[melloware]

10.8.1 is now in NPM if you guys want to try again.

[melloware]

I just tried and something is not right.

[KOliver94]

The change in themes got reverted while the actual files not. deac8c9

Update:
So this commit 91d18f0 renamed the font files as well and updated the theme. The later commit updated the theme but the files are still named something else.

https://github.com/primefaces/primereact/tree/master/public/themes/lara-light-blue/fonts

[melloware]

Yep I let them know....

[melloware]

OK 10.8.2 is out can everyone try again!

[lekhnath]

@melloware I tested with version 10.8.2 and the font issue appears to be resolved. Thanks for the fix!