marmelab · fzaninotto · Nov 22, 2022 · Nov 21, 2022 · Nov 22, 2022 · Nov 22, 2022
diff --git a/docs/Tutorial.md b/docs/Tutorial.md
@@ -80,7 +80,11 @@ const App = () => <Admin dataProvider={dataProvider} />;
 export default App;
 ```
 
-Also, change the default Vite CSS file to look like this:
+That's enough for react-admin to render an empty app and confirm that the setup is done: 
+
+[![Empty Admin](./img/tutorial_empty.png)](./img/tutorial_empty.png)
+
+Also, you should change the default Vite CSS file to look like this:
 
 ```diff
 // in src/index.css
@@ -89,9 +93,27 @@ body {
 }
 ```
 
-That's enough for react-admin to render an empty app and confirm that the setup is done: 
+Lastly, add the `Roboto` font to the `index.html` file:
 
-[![Empty Admin](./img/tutorial_empty.png)](./img/tutorial_empty.png)
+```diff
+// in ./index.html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React Admin</title>
++   <link
++     rel="stylesheet"
++     href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
++   />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
+```
 
 The `<App>` component renders an `<Admin>` component, which is the root component of a react-admin application. This component expects a `dataProvider` prop - a function capable of fetching data from an API. Since there is no standard for data exchanges between computers, you will probably have to write a custom provider to connect react-admin to your own APIs - but we'll dive into Data Providers later. For now, let's take advantage of the `ra-data-json-server` data provider, which speaks the same REST dialect as JSONPlaceholder.
 

diff --git a/docs/Vite.md b/docs/Vite.md
@@ -61,19 +61,35 @@ const App = () => <MyAdmin />;
 export default App;
 ```
 
-Finally, remove the `index.css` from the `main.tsx` folder:
+Then, change the `index.css` file to look like this:
 
 ```diff
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
--import './index.css';
-
-ReactDOM.createRoot(document.getElementById('root')).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
+// in src/index.css
+body {
+    margin: 0;
+}
+```
+
+Finally, add the `Roboto` font to your `index.html` file:
+
+```diff
+// in ./index.html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React Admin</title>
++   <link
++     rel="stylesheet"
++     href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
++   />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
 ```
 
 Now, start the server with `yarn dev`, browse to `http://localhost:5173/`, and you should see the working admin:

diff --git a/examples/tutorial/index.html b/examples/tutorial/index.html
@@ -5,6 +5,10 @@
         <link rel="icon" href="/favicon.ico" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Vite + React + TS</title>
+        <link
+            rel="stylesheet"
+            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+        />
     </head>
     <body>
         <div id="root"></div>

diff --git a/examples/tutorial/src/App.css b/examples/tutorial/src/App.css
diff --git a/examples/tutorial/src/index.css b/examples/tutorial/src/index.css
@@ -0,0 +1,3 @@
+body {
+    margin: 0;
+}
diff --git a/examples/tutorial/src/main.tsx b/examples/tutorial/src/main.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
+import './index.css';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
     <React.StrictMode>