search

theodorusclarence / ts-nextjs-tailwind-starter

🔋 Next.js + Tailwind CSS + TypeScript starter and boilerplate packed with useful development features
https://tsnext-tw.thcl.dev/
2.96k stars 522 forks source link

font-display should not be `optional` by default #246

Closed Johnrobmiller closed 8 months ago

Johnrobmiller commented 1 year ago

I think it's very questionable to default to optionally displaying the fonts by setting font-display to optional in the @font-face in globals.css. I know that only Inter is set to optional, but devs often copy/paste the whole @font-face that's in the template when importing their own fonts, trusting it will work for them, and the font-display property comes along with it.

You really would be required to give zero fucks about the design of your app/site to be ok with not loading your fonts to save the tiny sliver of time it takes to load them. Also, if you are working with a designer, setting the fonts to optional is just downright disrepectful, it's like you are saying "I know you problably carefully picked out these fonts for this design, but I don't care and I'm going to optionally load them anyways."

The default for the font-display value should not be optional. Maybe block? Or, maybe keep it s optional but add a helpful comment?

theodorusclarence commented 1 year ago

Hi, that's a great idea to add some comment.

I use font display optional to optimize for performance, but definitely there will be a case that they need block to preserve design https://web.dev/font-best-practices/#choose-an-appropriate-font-display-strategy

Feel free to open up a PR, thanks!