[docs] Fix Roboto font not loading in iframe demos

[Janpot]

Noticed while working on #47635, demos were not using the correct fonts in iframes.

• Add srcDoc attribute to iframe demos with Google Fonts link for Roboto
• Fixes font fallback to system fonts (Helvetica/Arial) in demos like https://mui.com/material-ui/react-app-bar/#responsive-app-bar-with-drawer

Screen.Recording.2026-01-21.at.11.25.11.mov

[mui-bot]

Netlify deploy preview

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

Bundle size report

Bundle	Parsed size	Gzip size
@mui/material	0B(0.00%)	0B(0.00%)
@mui/lab	0B(0.00%)	0B(0.00%)
@mui/system	0B(0.00%)	0B(0.00%)
@mui/utils	0B(0.00%)	0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against 56194c0

[Copilot]

Pull request overview

This PR attempts to fix font loading issues in iframe demos by adding a srcDoc attribute with Google Fonts link for Roboto. The goal is to prevent demos from falling back to system fonts (Helvetica/Arial) when displayed in iframes.

Changes:

• Added srcDoc attribute to iframe elements in DemoSandbox.js with basic HTML structure
• Included Google Fonts stylesheet link for Roboto font (weights 300, 400, 500, 700)

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated 2 comments.