diff --git a/addons/website/static/src/js/widgets/theme.js b/addons/website/static/src/js/widgets/theme.js
index 0a3571080a2..ff49818eccf 100644
--- a/addons/website/static/src/js/widgets/theme.js
+++ b/addons/website/static/src/js/widgets/theme.js
@@ -378,6 +378,20 @@ var ThemeCustomizeDialog = Dialog.extend({
                         _processItems($item.children(), $element.find('.o_theme_customize_selection'), true);
                         break;
 
+                    case 'FONTSELECTION':
+                        var $options = $();
+                        _.times(parseInt(self.style.getPropertyValue('--number-of-fonts')), function (font) {
+                            $options = $options.add($('<opt/>', {
+                                'data-widget': 'auto',
+                                'data-variable': $item.data('variable'),
+                                'data-value': font + 1,
+                                'data-font': font + 1,
+                            }));
+                        });
+                        $element = $(core.qweb.render('website.theme_customize_dropdown_option'));
+                        _processItems($options, $element.find('.o_theme_customize_selection'), true);
+                        break;
+
                     default:
                         _processItems($item.children(), $container, false);
                         return;
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index c63c246acec..1bda068be3f 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -55,6 +55,7 @@ $-font-numbers: (
     --h6: #{$-h6-color};
 
     --logo-height: #{$o-theme-navbar-logo-height};
+    --number-of-fonts: #{length($o-theme-fonts)};
 }
 
 #wrapwrap {
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 28195f913f3..3025d7276cb 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -551,44 +551,16 @@
         <!-- Font options -->
         <content id="theme_customize_content_fonts" string="Fonts" title="Choose your fonts">
             <list string="Title">
-                <selection id="theme_customize_content_fonts_title">
-                    <opt data-widget="auto" data-variable="headings-font-number" data-value="1" data-font="1"/>
-                    <opt data-widget="auto" data-variable="headings-font-number" data-value="2" data-font="2"/>
-                    <opt data-widget="auto" data-variable="headings-font-number" data-value="3" data-font="3"/>
-                    <opt data-widget="auto" data-variable="headings-font-number" data-value="4" data-font="4"/>
-                    <opt data-widget="auto" data-variable="headings-font-number" data-value="5" data-font="5"/>
-                    <opt data-widget="auto" data-variable="headings-font-number" data-value="6" data-font="6"/>
-                </selection>
+                <fontselection data-variable="headings-font-number"/>
             </list>
             <list string="Body">
-                <selection id="theme_customize_content_fonts_body">
-                    <opt data-widget="auto" data-variable="font-number" data-value="1" data-font="1"/>
-                    <opt data-widget="auto" data-variable="font-number" data-value="2" data-font="2"/>
-                    <opt data-widget="auto" data-variable="font-number" data-value="3" data-font="3"/>
-                    <opt data-widget="auto" data-variable="font-number" data-value="4" data-font="4"/>
-                    <opt data-widget="auto" data-variable="font-number" data-value="5" data-font="5"/>
-                    <opt data-widget="auto" data-variable="font-number" data-value="6" data-font="6"/>
-                </selection>
+                <fontselection data-variable="font-number"/>
             </list>
             <list string="Button">
-                <selection id="theme_customize_content_fonts_button">
-                    <opt data-widget="auto" data-variable="buttons-font-number" data-value="1" data-font="1"/>
-                    <opt data-widget="auto" data-variable="buttons-font-number" data-value="2" data-font="2"/>
-                    <opt data-widget="auto" data-variable="buttons-font-number" data-value="3" data-font="3"/>
-                    <opt data-widget="auto" data-variable="buttons-font-number" data-value="4" data-font="4"/>
-                    <opt data-widget="auto" data-variable="buttons-font-number" data-value="5" data-font="5"/>
-                    <opt data-widget="auto" data-variable="buttons-font-number" data-value="6" data-font="6"/>
-                </selection>
+                <fontselection data-variable="buttons-font-number"/>
             </list>
             <list string="Navbar">
-                <selection id="theme_customize_content_fonts_navbar">
-                    <opt data-widget="auto" data-variable="navbar-font-number" data-value="1" data-font="1"/>
-                    <opt data-widget="auto" data-variable="navbar-font-number" data-value="2" data-font="2"/>
-                    <opt data-widget="auto" data-variable="navbar-font-number" data-value="3" data-font="3"/>
-                    <opt data-widget="auto" data-variable="navbar-font-number" data-value="4" data-font="4"/>
-                    <opt data-widget="auto" data-variable="navbar-font-number" data-value="5" data-font="5"/>
-                    <opt data-widget="auto" data-variable="navbar-font-number" data-value="6" data-font="6"/>
-                </selection>
+                <fontselection data-variable="navbar-font-number"/>
             </list>
         </content>
     </div>