search

rohanray / next-fonts

Import fonts in Next.js (supports woff, woff2, eot, ttf, otf & svg)
179 stars 12 forks source link

Is this package necessary in current Next? #34

Closed mosesoak closed 4 years ago

mosesoak commented 4 years ago

Hi @rohanray -- I've been able to successfully import and use locally-packaged fonts (in public/fonts directory) with @font-face in a <style jsx global> tag, in a new NextJS project, without using this package.

Perhaps I'm confused after reading your docs description, which is simply "Import fonts in Next.js (woff, woff2, eot, ttf, otf & svg)", which again seems to work without this plugin. What functionality does this add that's not already provided?

Thank you, and thanks for your work. Just need more detail since I'm fighting bad FOUC in my stub Next app and looking for any way to get the fonts loaded and rendered in the SSG content to avoid it.

rohanray commented 4 years ago

@mosesoak : This plugin was created more than 2 years back. Nextjs did not have first class support for importing fonts without using plugins during those days. Hence, this plugin might not be needed for current and newer versions of Next.js

Having said that, this plugin would still be maintained for supporting projects running older versions of Next.js

mosesoak commented 4 years ago

@rohanray Cool, that's what I suspected, but it's not really clear from your README, timestamps (there was one recent commit showing at the top level of the repo), or the npm install trend: image

There are also a bunch of posts in the wild that recommend this extension.

While I wouldn't want you to lose out on having a popular repo, it would be super nice of you to add to the README intro to say that this plugin is not needed in the current version of Next.

Thanks again!

mosesoak commented 4 years ago

Just for other people's info if they find this post, simply pointing to local fonts packaged in the public folder from @font-face declarations is enough. You can also add tags with to preload fonts for slightly faster loading.

Google Fonts pro tip: After a bunch of testing we found that just adding a single Head link to the google font cdn, without any @font-face declarations, was far faster than self-hosted. So, save self-hosting for the rare cases where you actually need it!

mosesoak commented 4 years ago

Thanks and credit to @katesowles for figuring out that Google CDN is the fastest way to fly 🙏 🌟

katesowles commented 4 years ago

Forwarding thanks and credit to @wbunting and his article https://codeconqueror.com/blog/using-google-fonts-with-next-js

deadcoder0904 commented 4 years ago

@mosesoak Am I doing it right? https://github.com/rohanray/next-fonts-example/issues/8#issue-651014594