This is my first time seeking help on stackoverflow. I have been struggling to understand why the font on my website doesn't display correctly in Safari or any browser on IOS devices, even though it appears fine on Chrome, Firefox, and other browsers.
I have diligently followed all recommended steps for adding fonts to a Next.js 14 application as outlined in the documentation. It seems like the issue may be with Apple's webkit engine or possibly how Next.js handles the rendering of these font files? It must be one of those explanations.
I have confirmed that the font is compatible with webfont formats like WOFF, and I have even experimented with using @font-face instead of relying on Next.js's specific next/font method. Interestingly, I have used this same font successfully in a previous project that was a simple static HTML/CSS setup. This leads me to believe that the problem might be related to how Next.js manages the rendering of these font files.
If anyone with more experience or who has encountered a similar issue could offer some guidance, I would greatly appreciate it.
UPDATE:
After further testing, it appears that the problem lies within the way Next.js handles font loading and optimization, particularly affecting Safari compatibility. By manually overriding the font in CSS rather than utilizing the recommended next/local/font approach suggested in the Next.js documentation, I was able to resolve the issue and achieve the desired font display.
If anyone else has insights or experiences related to this issue, please feel free to share your thoughts for the benefit of others.