[docs-infra] Fix font best practice

Steps to reproduce

• 1. We use Google Font to load some of the font of the docs:
  https://github.com/mui/material-ui/blob/a4876336bedd35d342a83eb081b0c1fc456b2339/docs/pages/_document.js#L81

However, this doesn't seem to be a best practice, see https://www.debugbear.com/blog/website-font-performance#self-host-your-web-fonts for why. The problem really boils down to having to make a CSS network request to then be able to load the font. Since 2021, all browsers have implemented cache partitioning, so there are no more CDN performance benefits.

• 2. We should likely warn about this problem in the docs, e.g. https://mui.com/material-ui/react-typography/#google-web-fonts is nice when you want a quick and easy way to test stuff, e.g. for bug reproductions, visual regression tests environment, but not really for production.

There is a reason why https://nextjs.org/docs/app/building-your-application/optimizing/fonts and https://docs.astro.build/en/guides/fonts/ don't mention it.

• 3. We are missing the correct font fallback. Either we should use something like https://nextjs.org/docs/app/building-your-application/optimizing/fonts or set font-display: fallback https://web.dev/articles/font-best-practices#choose_an_appropriate_font-display_strategy to be coherence.

For example, compare https://dashboard.tremor.so/overview load to https://mui.com/material-ui/getting-started/templates/dashboard/. What we do is not at the quality level, we need to set.

Start with docs/pages/_document.js, especially the Google Font loading around line 81, then review the Google Web Fonts guidance in the Typography documentation. The work is complete when font loading uses an appropriate fallback strategy and the docs explain when Google Fonts are suitable for testing but not production.