[examples] Fix material-next-app-router Font Usage with next/font

[onderonur]

• I have followed (at least) the PR section of the contributing guide.

This PR aims to align all the used font-family styles of MUI components when next/font is used.

With the current approach, className which contains font-family from next/font is added to body and the font-family from next/font is applied to generic HTML elements.

But MUI components still use the default font-family from theme and since we don't install Roboto font with CDN etc., they don't use this font and they fall back to next fonts like Helvetica.

For example, we can check the "On This Page" text. It is a Typography component and it uses the default "Roboto", "Helvetiva", "Arial", sans-serif font-family even if we set the className of body.

But after this change, it will start using --font-roboto CSS variable, which we got from next/font and set on html element.

And here are the fullpage screenshots.

Before:

After:

[mui-bot]

Netlify deploy preview

https://deploy-preview-38026--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 1e2aef9

[mj12albert]

@onderonur Nice catch ~ thanks for working on this!