Font Optimization example unclear on showing global usage

Looking at the code sample for Font Optimization, the index.jsx page imports inter from lib.

However, it then goes on to re-declare inter down within the documentation, causing the actual lib/inter file to not be used. Line 33 declares inter and seems to be the only place that the import would potentially actually be used. This leads to confusion to the reader about how and where the font is actually being referenced.

I think that the commented out code in _app.tsx might be what is supposed to be using the lib folder reference, but doesn't show the import of it at the top (nor commented out).

Personally, looking through the example I also found it really confusing because it has Tailwind explicitly mushed in, rather than just highlighting how you would use and set the fonts via classname like the documents do (https://nextjs.org/docs/api-reference/next/font) -- for those of us not using Tailwind, it's hard to see where the magic is explicitly happening that Next is doing under the hood (especially in consideration at all to the global fonts).

The only other spot in examples where I could see local fonts being used or set was in the platforms-slate-supabase example, which is also using Tailwind and doesn't seem to be using next/font. The other font example I see is in edge-functions but is explicitly not using the next/font package?

Is there an example somewhere that does use the recommended exported reused font declaration?

Related - the documentation for using next/font overall seems integrated with Next 13 only.

Start by comparing solutions/loading-web-fonts/pages/index.tsx, pages/_app.tsx, and the lib/inter file referenced in the issue. Review the linked next/font documentation and determine how the example should demonstrate reused and global font declarations, including the role of Tailwind. Done means the example has one clear usage path and its documentation matches the implementation.