diff --git a/addons/website/static/src/scss/options/fonts/option_font_navbar_02_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_navbar_02_variables.scss
new file mode 100644
index 00000000000..45d8014b8eb
--- /dev/null
+++ b/addons/website/static/src/scss/options/fonts/option_font_navbar_02_variables.scss
@@ -0,0 +1 @@
+$o-theme-navbar-font-number: 2;
diff --git a/addons/website/static/src/scss/options/fonts/option_font_navbar_03_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_navbar_03_variables.scss
new file mode 100644
index 00000000000..c46c2de1180
--- /dev/null
+++ b/addons/website/static/src/scss/options/fonts/option_font_navbar_03_variables.scss
@@ -0,0 +1 @@
+$o-theme-navbar-font-number: 3;
diff --git a/addons/website/static/src/scss/options/fonts/option_font_navbar_04_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_navbar_04_variables.scss
new file mode 100644
index 00000000000..69662acc773
--- /dev/null
+++ b/addons/website/static/src/scss/options/fonts/option_font_navbar_04_variables.scss
@@ -0,0 +1 @@
+$o-theme-navbar-font-number: 4;
diff --git a/addons/website/static/src/scss/options/fonts/option_font_navbar_05_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_navbar_05_variables.scss
new file mode 100644
index 00000000000..c96837086b5
--- /dev/null
+++ b/addons/website/static/src/scss/options/fonts/option_font_navbar_05_variables.scss
@@ -0,0 +1 @@
+$o-theme-navbar-font-number: 5;
diff --git a/addons/website/static/src/scss/options/fonts/option_font_navbar_06_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_navbar_06_variables.scss
new file mode 100644
index 00000000000..49ef9f8167c
--- /dev/null
+++ b/addons/website/static/src/scss/options/fonts/option_font_navbar_06_variables.scss
@@ -0,0 +1 @@
+$o-theme-navbar-font-number: 6;
diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss
index 86c42c2bab1..fb8059b6382 100644
--- a/addons/website/static/src/scss/primary_variables.scss
+++ b/addons/website/static/src/scss/primary_variables.scss
@@ -61,3 +61,4 @@ $o-theme-font-names: (
 $o-theme-font-number: 1 !default;
 $o-theme-headings-font-number: 1 !default;
 $o-theme-buttons-font-number: 1 !default;
+$o-theme-navbar-font-number: 1 !default;
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index fba54ae9a91..4322adabcad 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -2,20 +2,20 @@
 /// This file regroups the website design rules.
 ///
 
-$-theme-font: nth($o-theme-font-urls, $o-theme-font-number);
-@if $-theme-font {
-    @import url("https://fonts.googleapis.com/css?family=#{unquote($-theme-font)}");
-}
-@if $o-theme-headings-font-number != $o-theme-font-number {
-    $-theme-font: nth($o-theme-font-urls, $o-theme-headings-font-number);
-    @if $-theme-font {
-        @import url("https://fonts.googleapis.com/css?family=#{unquote($-theme-font)}");
-    }
-}
-@if $o-theme-buttons-font-number != $o-theme-font-number and $o-theme-buttons-font-number != $o-theme-headings-font-number {
-    $-theme-font: nth($o-theme-font-urls, $o-theme-buttons-font-number);
-    @if $-theme-font {
-        @import url("https://fonts.googleapis.com/css?family=#{unquote($-theme-font)}");
+$-seen: ();
+$-font-numbers: (
+    $o-theme-font-number,
+    $o-theme-headings-font-number,
+    $o-theme-buttons-font-number,
+    $o-theme-navbar-font-number
+);
+@each $-number in $-font-numbers {
+    @if index($-seen, $-number) == null {
+        $-seen: append($-seen, $-number);
+        $-theme-font: nth($o-theme-font-urls, $-number);
+        @if $-theme-font {
+            @import url("https://fonts.googleapis.com/css?family=#{unquote($-theme-font)}");
+        }
     }
 }
 
@@ -32,14 +32,9 @@ $-theme-font: nth($o-theme-font-urls, $o-theme-font-number);
     }
 }
 
-.navbar-light {
-    // Style only navbar-light which Odoo is only supposed to use in standard
-    // anyway. Automatically mimic navbar-dark if the user's menu color is dark.
-    // Note: this only works because navbar-light is defined before navbar-dark,
-    // we may want to use a safest way when possible.
-    background-color: color('menu') !important;
-    @if (color-yiq(color('menu')) != $yiq-text-dark) {
-        @extend .navbar-dark;
+.navbar {
+    @if ($o-theme-navbar-font-number != $o-theme-font-number) {
+        font-family: nth($o-theme-fonts, $o-theme-navbar-font-number);
     }
 
     .nav-item {
@@ -51,6 +46,18 @@ $-theme-font: nth($o-theme-font-urls, $o-theme-font-number);
         opacity: 0 !important;
     }
 }
+
+.navbar-light {
+    // Style only navbar-light which Odoo is only supposed to use in standard
+    // anyway. Automatically mimic navbar-dark if the user's menu color is dark.
+    // Note: this only works because navbar-light is defined before navbar-dark,
+    // we may want to use a safest way when possible.
+    background-color: color('menu') !important;
+    @if (color-yiq(color('menu')) != $yiq-text-dark) {
+        @extend .navbar-dark;
+    }
+}
+
 .o_footer {
     @include o-bg-color(color('footer'));
 
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index d0c203e1117..07263647023 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -508,6 +508,14 @@
                 <opt data-xmlid="website.option_font_button_05_variables" data-font="5"/>
                 <opt data-xmlid="website.option_font_button_06_variables" data-font="6"/>
             </list>
+            <list id="theme_customize_content_fonts_navbar" string="Navbar">
+                <opt data-xmlid="" data-font="1"/>
+                <opt data-xmlid="website.option_font_navbar_02_variables" data-font="2"/>
+                <opt data-xmlid="website.option_font_navbar_03_variables" data-font="3"/>
+                <opt data-xmlid="website.option_font_navbar_04_variables" data-font="4"/>
+                <opt data-xmlid="website.option_font_navbar_05_variables" data-font="5"/>
+                <opt data-xmlid="website.option_font_navbar_06_variables" data-font="6"/>
+            </list>
         </content>
     </div>
 </template>
@@ -616,6 +624,33 @@
     </xpath>
 </template>
 
+<!-- Navbar font options -->
+<template id="option_font_navbar_02_variables" inherit_id="website._assets_primary_variables" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_navbar_02_variables.scss"/>
+    </xpath>
+</template>
+<template id="option_font_navbar_03_variables" inherit_id="website._assets_primary_variables" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_navbar_03_variables.scss"/>
+    </xpath>
+</template>
+<template id="option_font_navbar_04_variables" inherit_id="website._assets_primary_variables" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_navbar_04_variables.scss"/>
+    </xpath>
+</template>
+<template id="option_font_navbar_05_variables" inherit_id="website._assets_primary_variables" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_navbar_05_variables.scss"/>
+    </xpath>
+</template>
+<template id="option_font_navbar_06_variables" inherit_id="website._assets_primary_variables" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_navbar_06_variables.scss"/>
+    </xpath>
+</template>
+
 <template id="kanban">
     <t t-set="step"><t t-esc="step or 0"/></t>
     <t t-set="scope"><t t-esc="scope or 0"/></t>