Do I really need to load Roboto font when using MUI?

Question

I can see from the Material UI documentation that the user is responsible for loading the Roboto font :

Material UI is designed to use the Roboto font by default. You may add it to your project with npm or yarn via Fontsource, or with the Google Fonts CDN.

The Roboto font will not be automatically loaded by MUI. You are responsible for loading any fonts used in your application.

I tried one of their example projects (the vitejs one). I can't see any loading of the Roboto font in this project.

When starting it using npm run dev, I can see the text is correctly displayed with the Roboto font despite the fact that I can't see any trace of this font in the index HTML page.

I didn't see any <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/> in the header. I also tried to find any @font-face in the inline styles without any success.

I'm wondering where does the Roboto font come from? Is it included by default in modern computers (I'm currently using Firefox on a Ubuntu laptop) ?

Answer 1

TL;DR

No -- you do need to install the Roboto font to use MUI, since it is configured with fallbacks (and you can override the Roboto usage globally), but if you want to conform to the used version of Google's Material Design guidelines or have a more consistent cross-platform UI, you may want to.

What you're most likely seeing is the fallback font (your system's version of Helvetica or another sans serif font, if Roboto is not installed locally). They do look somewhat similar, but upon closer inspection of the subtleties, you can see that the fonts differ. (Rounding, spacing, etc.)

CodeSandbox - MUI with Roboto loaded

CodeSandbox - MUI without Roboto loaded

Pre-installed OSes

As far as I'm aware, Android is the only OS where Roboto is a pre-installed font.

Not installed by default:

• MacOS Monterey Font List
• Windows 11 Font list

(I couldn't reasonably find a list of Ubuntu pre-installed fonts)

Confirming on Firefox

On Firefox the rendered (used) font can be seen by inspecting an element, then viewing the "Fonts Used" section of the "Fonts" panel.

Confirming on Chrome

On Chrome the rendered (used) font can be seen by inspecting an element, then viewing the "Rendered Fonts" section of the "Computed" tab.

Fun side note -- Firefox used to have quite a few font loading/rendering problems which is why I still have trust issues using Firefox for dev.