diff --git a/demo/main.css b/demo/main.css
index 34a99705ee..c6c8e98f6a 100644
--- a/demo/main.css
+++ b/demo/main.css
@@ -8,6 +8,8 @@ html {
 body {
   height: 100%;
   margin: 0px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Ubuntu,
+    "Noto Sans", Arial, sans-serif !important;
 }
 .o-spreadsheet {
   width: 100%;
diff --git a/src/components/composer/composer/composer.ts b/src/components/composer/composer/composer.ts
index 71cc9487c9..87e1504e58 100644
--- a/src/components/composer/composer/composer.ts
+++ b/src/components/composer/composer/composer.ts
@@ -1,5 +1,5 @@
 import { Component, onMounted, onPatched, onWillUnmount, useRef, useState } from "@odoo/owl";
-import { NEWLINE } from "../../../constants";
+import { DEFAULT_FONT, NEWLINE } from "../../../constants";
 import { EnrichedToken } from "../../../formulas/index";
 import { functionRegistry } from "../../../functions/index";
 import {
@@ -63,6 +63,7 @@ css/* scss */ `
       padding-right: 2px;
 
       box-sizing: border-box;
+      font-family: ${DEFAULT_FONT};
 
       caret-color: black;
       padding-left: 3px;
diff --git a/src/components/figures/chart/scorecard/chart_scorecard.ts b/src/components/figures/chart/scorecard/chart_scorecard.ts
index 895e41da69..dc4b7864ed 100644
--- a/src/components/figures/chart/scorecard/chart_scorecard.ts
+++ b/src/components/figures/chart/scorecard/chart_scorecard.ts
@@ -26,6 +26,7 @@ const LINE_HEIGHT = 1.2;
 
 css/* scss */ `
   div.o-scorecard {
+    font-family: ${DEFAULT_FONT};
     user-select: none;
     background-color: white;
     display: flex;
diff --git a/src/components/spreadsheet/spreadsheet.ts b/src/components/spreadsheet/spreadsheet.ts
index f3a0601cc8..27fd7dcfef 100644
--- a/src/components/spreadsheet/spreadsheet.ts
+++ b/src/components/spreadsheet/spreadsheet.ts
@@ -55,9 +55,6 @@ css/* scss */ `
       color: #333;
     }
 
-    * {
-      font-family: "Roboto", "RobotoDraft", Helvetica, Arial, sans-serif;
-    }
     &,
     *,
     *:before,