diff --git a/addons/web/static/src/scss/primary_variables.scss b/addons/web/static/src/scss/primary_variables.scss
index 36ac20d13b0..ebc7bf5d17e 100644
--- a/addons/web/static/src/scss/primary_variables.scss
+++ b/addons/web/static/src/scss/primary_variables.scss
@@ -9,6 +9,13 @@ $o-font-size-base: 13rem * (1px / $o-root-font-size) !default;
 $o-font-size-base-touch: 15px !default;
 $o-line-height-base: 1.5 !default; // This is BS default
 
+// This is the bootstrap default, it is duplicated here as we need to process
+// it before actually using it (to add more unicode support with the special
+// Odoo font for example). Adding unicode support is not done directly here as
+// this font can be used by the website where the unicode support is already
+// automatically added.
+$o-system-fonts: (system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji") !default;
+
 // Colors
 // This is BS default
 $o-white: #FFFFFF !default;
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 46502c0130f..a023efe85e8 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -124,10 +124,13 @@ const FontFamilyPickerUserValueWidget = SelectUserValueWidget.extend({
         const variable = this.el.dataset.variable;
         _.times(nbFonts, fontNb => {
             const realFontNb = fontNb + 1;
+            const fontKey = weUtils.getCSSVariableValue(`font-number-${realFontNb}`, style);
+            const fontName = fontKey === "'SYSTEM_FONTS'" ? _t("System Fonts") : fontKey.slice(1, -1);
             const fontEl = document.createElement('we-button');
             fontEl.classList.add(`o_we_option_font_${realFontNb}`);
+            fontEl.setAttribute('string', fontName);
             fontEl.dataset.variable = variable;
-            fontEl.dataset[methodName] = weUtils.getCSSVariableValue(`font-number-${realFontNb}`, style);
+            fontEl.dataset[methodName] = fontKey;
             fontEl.dataset.font = realFontNb;
             fontEls.push(fontEl);
             this.menuEl.appendChild(fontEl);
diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss
index feea57e5624..edf9a3762da 100644
--- a/addons/website/static/src/scss/primary_variables.scss
+++ b/addons/website/static/src/scss/primary_variables.scss
@@ -2031,9 +2031,11 @@ $o-font-aliases-to-keys: (
 );
 $o-website-values-palettes: (
     (
-        'headings-font': 'Source Sans Pro',
-        'navbar-font': 'Source Sans Pro',
-        'buttons-font': 'Source Sans Pro',
+        // By default, the $o-base-website-values-palette for fonts are "null"
+        // but will actually automatically be filled with the first font themes
+        // define in $o-theme-font-configs (for the base one). For the default
+        // website, we want to specifically use the system fonts.
+        'font': 'SYSTEM_FONTS',
     ),
 ) !default;
 $o-website-values-palette-number: 1 !default;
@@ -2067,6 +2069,16 @@ $o-theme-h6-font-size-multiplier: 1 !default;
 //         ...,
 //     )
 // )
+// $o-base-theme-font-configs will be used to automatically extend
+// $o-theme-font-configs whatever themes added inside.
+$o-base-theme-font-configs: (
+    'SYSTEM_FONTS': (
+        // This allows users to use default system fonts, potentially improving
+        // page loading performances. This should always be kept as the first
+        // font defined in $o-base-theme-font-configs.
+        'family': $o-system-fonts,
+    ),
+) !default;
 $o-theme-font-configs: (
     'Roboto': (
         'family': ('Roboto', sans-serif),
diff --git a/addons/website/static/src/scss/secondary_variables.scss b/addons/website/static/src/scss/secondary_variables.scss
index 5ab1eb4427a..08f55012a6c 100644
--- a/addons/website/static/src/scss/secondary_variables.scss
+++ b/addons/website/static/src/scss/secondary_variables.scss
@@ -4,7 +4,8 @@
 
 // Complete the base website values palette with the first defined font in
 // $o-theme-font-configs, this allows themes to just define a list of fonts and
-// relying on the fact the first one will be used.
+// relying on the fact the first one will be used (but not SYSTEM_FONTS which
+// is defined in $o-base-theme-font-configs).
 $-first-font-name: nth(map-keys($o-theme-font-configs), 1);
 @if map-get($o-base-website-values-palette, 'font') == null {
     $o-base-website-values-palette: map-merge($o-base-website-values-palette, (
@@ -215,6 +216,10 @@ $o-we-auto-contrast-exclusions: join($o-we-auto-contrast-exclusions, map-keys($o
 // Fonts
 //------------------------------------------------------------------------------
 
+// Use $o-base-theme-font-configs to extend $o-theme-font-configs whatever
+// themes added inside.
+$o-theme-font-configs: map-merge($o-base-theme-font-configs, $o-theme-font-configs);
+
 // Merge base fonts with user-added google fonts
 @each $font-name in (o-website-value('google-fonts') or ()) {
     $o-theme-font-configs: map-merge($o-theme-font-configs, (
@@ -243,7 +248,11 @@ $o-we-auto-contrast-exclusions: join($o-we-auto-contrast-exclusions, map-keys($o
     $-font-config: o-safe-get($o-theme-font-configs, $font-name, ());
     @return map-get($-font-config, $config-key);
 }
-$o-theme-font: o-get-font-info('base') or (sans-serif,) !default;
+
+$o-theme-font: o-get-font-info('base') !default;
+// A theme which defines no default font normally automatically uses the first
+// one in $o-base-theme-font-configs. This ensures a misconfiguration also does.
+$o-theme-font: $o-theme-font or o-add-unicode-support-font($o-system-fonts);
 $o-theme-headings-font: o-get-font-info('headings') or $o-theme-font !default;
 $o-theme-navbar-font: o-get-font-info('navbar') or $o-theme-font !default;
 $o-theme-buttons-font: o-get-font-info('buttons') or $o-theme-font !default;
diff --git a/addons/website/static/src/scss/website.wysiwyg.scss b/addons/website/static/src/scss/website.wysiwyg.scss
index bc54e4de92c..afa96c78faa 100644
--- a/addons/website/static/src/scss/website.wysiwyg.scss
+++ b/addons/website/static/src/scss/website.wysiwyg.scss
@@ -38,10 +38,6 @@ $i: 1;
 @each $font-name, $font-config in $o-theme-font-configs {
     we-toggler.o_we_option_font_#{$i}, we-button.o_we_option_font_#{$i} > div {
         font-family: o-safe-get($font-config, 'family', $font-family-base);
-
-        &::before {
-            content: $font-name;
-        }
     }
     $i: $i + 1;
 }