Theme: Failed to decode font

KOliver94 commented 3 weeks ago

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

Open any StackBlitz project and use PrimeReact version 10.7.0.
Check the console for warnings
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 commented 3 weeks ago

@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 commented 2 weeks ago

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

lekhnath commented 1 week ago

Same here. Screenshot attached.

zeltrex7 commented 1 week ago

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 commented 2 days ago

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 commented 2 days ago

@onursenture ping...

onursenture commented 2 days ago

@onursenture ping...

I've updated the Inter font: https://github.com/primefaces/primereact/commit/91d18f0819aa17a7acb0ea87154c6699eab6302a

Could you verify if the issue is fixed?

KOliver94 commented 1 day ago

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 commented 1 day ago

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

I opened a PR with the fix: https://github.com/primefaces/primereact/pull/6977

primefaces / primereact