diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js b/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js
index 6bf55bb787a..5ed02d3a332 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js
@@ -176,7 +176,7 @@ const ColorPaletteWidget = Widget.extend({
             },
         });
         this.style.getPropertyValue(`--custom-colors`).trim().split(' ').forEach(v => {
-            const color = this.style.getPropertyValue(`--${v}`).trim();
+            const color = this.style.getPropertyValue(`--${v.substring(1, v.length - 1)}`).trim();
             if (ColorpickerWidget.isCSSColor(color)) {
                 this._addCustomColor(existingColors, color);
             }
diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss
index 020ba4f5203..9bfb7cf025e 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -4,7 +4,7 @@
 
 :root {
     @each $color, $value in $grays {
-        --#{$color}: #{$value};
+        @include print-variable($color, $value);
     }
 
     // Most of the keys of the color combination color should be null. We have
@@ -19,45 +19,45 @@
         $-h6: color('o-cc#{$index}-h6') or $-h5;
 
         @if not color('o-cc#{$index}-text') {
-            --o-cc#{$index}-text: #{$-text};
+            @include print-variable('o-cc#{$index}-text', $-text);
         }
         @if not color('o-cc#{$index}-headings') {
-            --o-cc#{$index}-headings: #{$-headings};
+            @include print-variable('o-cc#{$index}-headings', $-headings);
         }
         @if not color('o-cc#{$index}-h2') {
-            --o-cc#{$index}-h2: #{$-h2};
+            @include print-variable('o-cc#{$index}-h2', $-h2);
         }
         @if not color('o-cc#{$index}-h3') {
-            --o-cc#{$index}-h3: #{$-h3};
+            @include print-variable('o-cc#{$index}-h3', $-h3);
         }
         @if not color('o-cc#{$index}-h4') {
-            --o-cc#{$index}-h4: #{$-h4};
+            @include print-variable('o-cc#{$index}-h4', $-h4);
         }
         @if not color('o-cc#{$index}-h5') {
-            --o-cc#{$index}-h5: #{$-h5};
+            @include print-variable('o-cc#{$index}-h5', $-h5);
         }
         @if not color('o-cc#{$index}-h6') {
-            --o-cc#{$index}-h6: #{$-h6};
+            @include print-variable('o-cc#{$index}-h6', $-h6);
         }
 
         @if not color('o-cc#{$index}-link') {
-            --o-cc#{$index}-link: #{theme-color('primary')};
+            @include print-variable('o-cc#{$index}-link', theme-color('primary'));
         }
 
         $-btn-primary: color('o-cc#{$index}-btn-primary');
         @if not $-btn-primary {
-            --o-cc#{$index}-btn-primary: #{theme-color('primary')};
+            @include print-variable('o-cc#{$index}-btn-primary', theme-color('primary'));
         }
         @if not color('o-cc#{$index}-btn-primary-border') {
-            --o-cc#{$index}-btn-primary-border: #{$-btn-primary or theme-color('primary')};
+            @include print-variable('o-cc#{$index}-btn-primary-border', $-btn-primary or theme-color('primary'));
         }
 
         $-btn-secondary: color('o-cc#{$index}-btn-secondary');
         @if not $-btn-secondary {
-            --o-cc#{$index}-btn-secondary: #{theme-color('secondary')};
+            @include print-variable('o-cc#{$index}-btn-secondary', theme-color('secondary'));
         }
         @if not color('o-cc#{$index}-btn-secondary-border') {
-            --o-cc#{$index}-btn-secondary-border: #{$-btn-secondary or theme-color('secondary')};
+            @include print-variable('o-cc#{$index}-btn-secondary-border', $-btn-secondary or theme-color('secondary'));
         }
     }
 }
diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss
index fd89f662567..21ce8c9fe8d 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -440,3 +440,18 @@ $o-color-extras-nesting-selector: '&, .o_colored_level &';
         @include o-bg-color(o-color($-related-color), $background: $background, $important: false);
     }
 }
+
+// Print a document property the right way (depending on the type of the printed
+// variable).
+@mixin print-variable($key, $value) {
+    @if $value != null {
+        $-type: type-of($value);
+        @if $-type == 'string' {
+            --#{$key}: '#{$value}';
+        } @else if $-type == 'list' {
+            --#{$key}: #{inspect($value)};
+        } @else {
+            --#{$key}: #{$value};
+        }
+    }
+}
diff --git a/addons/web_editor/static/src/scss/wysiwyg.scss b/addons/web_editor/static/src/scss/wysiwyg.scss
index 08dc16f8c7b..57252fd1d05 100644
--- a/addons/web_editor/static/src/scss/wysiwyg.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg.scss
@@ -4,19 +4,19 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
 // Use css variables to control the default style of the editor so that an
 // external assets bundle can influence it without duplicating the css.
 :root {
-    --o-we-toolbar-height: #{$o-we-toolbar-height};
+    @include print-variable('o-we-toolbar-height', $o-we-toolbar-height);
 
-    --o-we-bg-color: #{$o-we-bg-color};
-    --o-we-bg-color-dark: #{$o-we-bg-color-dark};
-    --o-we-color: #{$o-we-color};
-    --o-we-color-accent: #{$o-we-color};
+    @include print-variable('o-we-bg-color', $o-we-bg-color);
+    @include print-variable('o-we-bg-color-dark', $o-we-bg-color-dark);
+    @include print-variable('o-we-color', $o-we-color);
+    @include print-variable('o-we-color-accent', $o-we-color);
 
-    --o-we-dropdown-bg-color: #{$o-we-dropdown-bg-color};
-    --o-we-dropdown-color: #{$o-we-dropdown-color};
+    @include print-variable('o-we-dropdown-bg-color', $o-we-dropdown-bg-color);
+    @include print-variable('o-we-dropdown-color', $o-we-dropdown-color);
 
-    --o-we-snippets-bg-color: #{$o-we-bg-color};
-    --o-we-snippets-bg-info: #{$o-we-color-info};
-    --o-we-snippets-color: #{$o-we-color};
+    @include print-variable('o-we-snippets-bg-color', $o-we-bg-color);
+    @include print-variable('o-we-snippets-bg-info', $o-we-color-info);
+    @include print-variable('o-we-snippets-color', $o-we-color);
 }
 
 // EDITOR TOP BAR AND POPOVER
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index b4b5f4d625e..2e4bd826806 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -80,6 +80,7 @@ const FontFamilyPickerUserValueWidget = SelectUserValueWidget.extend({
         this.nbFonts = parseInt(style.getPropertyValue('--number-of-fonts'));
         const googleFontsProperty = style.getPropertyValue('--google-fonts').trim();
         this.googleFonts = googleFontsProperty ? googleFontsProperty.split(/\s*,\s*/g) : [];
+        this.googleFonts = this.googleFonts.map(font => font.substring(1, font.length - 1)); // Unquote
 
         await this._super(...arguments);
 
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 282317ecac6..902b890130d 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -25,38 +25,38 @@ $-font-numbers: (
     // customized by themes, the user or anything else (so there is no file to
     // parse to get them). Those will be printed here as CSS variables.
 
-    --support-13-0-color-system: #{$o-support-13-0-color-system};
-    --has-customized-13-0-color-system: #{$o-has-customized-13-0-color-system};
+    @include print-variable('support-13-0-color-system', $o-support-13-0-color-system);
+    @include print-variable('has-customized-13-0-color-system', $o-has-customized-13-0-color-system);
 
     // 1) Handle default values
-    --header-font-size: #{$font-size-base};
+    @include print-variable('header-font-size', $font-size-base);
 
     // 2) The values in the $theme-colors map are already printed by Bootstrap.
 
     // 3) The values in the $colors map are also printed by Bootstrap.
 
     // 4) The Odoo values map, $o-website-values, must be printed.
-    @each $key, $value in o-map-omit($o-website-values) {
-        --#{$key}: #{$value};
+    @each $key, $value in $o-website-values {
+        @include print-variable($key, $value);
     }
 
     // 5) Use final value used by the theme
-    --body: #{$body-bg};
+    @include print-variable('body', $body-bg);
 
-    --logo-height: #{$o-theme-navbar-logo-height};
-    --fixed-logo-height: #{$o-theme-navbar-fixed-logo-height};
-    --number-of-fonts: #{length($o-theme-fonts)};
+    @include print-variable('logo-height', $o-theme-navbar-logo-height);
+    @include print-variable('fixed-logo-height', $o-theme-navbar-fixed-logo-height);
+    @include print-variable('number-of-fonts', length($o-theme-fonts));
 
-    --number-of-color-palettes: #{length($o-color-palettes) - 1}; // -1 since the last one is the user customized one
-    --color-palettes-number: #{$o-original-color-palette-number};
-    --has-customized-colors: #{$o-has-customized-colors};
+    @include print-variable('number-of-color-palettes', length($o-color-palettes) - 1); // -1 since the last one is the user customized one
+    @include print-variable('color-palettes-number', $o-original-color-palette-number);
+    @include print-variable('has-customized-colors', $o-has-customized-colors);
 
     // 6) Get list of colorpalette custom colors
     $custom-colors: ();
     @each $key, $value in $o-color-palette {
         $custom-colors: append($custom-colors, $key);
     }
-    --custom-colors: #{$custom-colors};
+    @include print-variable('custom-colors', $custom-colors);
 }
 
 #wrapwrap {
diff --git a/addons/website/static/src/scss/website.wysiwyg.scss b/addons/website/static/src/scss/website.wysiwyg.scss
index 515d3d2b6a1..e1d7ecdd00c 100644
--- a/addons/website/static/src/scss/website.wysiwyg.scss
+++ b/addons/website/static/src/scss/website.wysiwyg.scss
@@ -6,24 +6,24 @@
 }
 
 :root {
-    // Override css variables to influence the default style of the editor without
-    // duplicating the css.
-    --o-we-toolbar-height: #{$o-navbar-height};
-    --o-we-bg-color: #{$o-we-color-dark};
-    --o-we-bg-color-dark: #{$o-we-color-darker};
-    --o-we-color: #{$o-we-color-text-normal};
-    --o-we-color-accent: #{$o-we-color-text-light};
+    // Override css variables to influence the default style of the editor
+    // without duplicating the css.
+    @include print-variable('o-we-toolbar-height', $o-navbar-height);
+    @include print-variable('o-we-bg-color', $o-we-color-dark);
+    @include print-variable('o-we-bg-color-dark', $o-we-color-darker);
+    @include print-variable('o-we-color', $o-we-color-text-normal);
+    @include print-variable('o-we-color-accent', $o-we-color-text-light);
 
-    --o-we-dropdown-bg-color: #{$o-we-color-darker};
-    --o-we-dropdown-color: #{$o-we-color-text-normal};
+    @include print-variable('o-we-dropdown-bg-color', $o-we-color-darker);
+    @include print-variable('o-we-dropdown-color', $o-we-color-text-normal);
 
-    --o-we-snippets-bg-color: #{$o-we-color-normal};
-    --o-we-snippets-color: #{$o-we-color-text-light};
+    @include print-variable('o-we-snippets-bg-color', $o-we-color-normal);
+    @include print-variable('o-we-snippets-color', $o-we-color-text-light);
 
     // Need info about the color of each color palette
     @for $index from 1 through length($o-color-palettes) - 1 { // Not the user one
         @each $name, $color in nth($o-color-palettes, $index) {
-            --o-palette-#{$index}-#{$name}: #{$color};
+            @include print-variable('o-palette-#{$index}-#{$name}', $color);
         }
     }
 }
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 4102ac5d0af..6a864e896a7 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -448,27 +448,27 @@
             <we-button id="option_template_header_logo_menu"
                        data-name="header_logo_menu_opt"
                        data-customize-website-views=""
-                       data-customize-website-variable="logo_menu"
+                       data-customize-website-variable="'logo_menu'"
                        string="Logo - Menu"/>
             <we-button id="option_template_header_hamburger_logo_centered"
                        data-name="header_hamburger_logo_centered_opt"
                        data-customize-website-views="website.template_header_hamburger, website.template_header_hamburger_left"
-                       data-customize-website-variable="hamburger_logo"
+                       data-customize-website-variable="'hamburger_logo'"
                        string="Hamburger - Logo"/>
             <we-button id="option_template_header_logo_menu_below"
                        data-name="header_logo_menu_below_opt"
                        data-customize-website-views=""
-                       data-customize-website-variable="logo_menu_below"
+                       data-customize-website-variable="'logo_menu_below'"
                        string="Logo (Top) - Menu"/>
             <we-button id="option_template_header_menu_logo_below"
                        data-name="header_menu_logo_below_opt"
                        data-customize-website-views=""
-                       data-customize-website-variable="menu_logo_below"
+                       data-customize-website-variable="'menu_logo_below'"
                        string="Menu - Logo (Bottom)"/>
             <we-button id="option_template_header_logo_hamburger"
                        data-name="header_logo_hamburger_opt"
                        data-customize-website-views="website.template_header_hamburger, website.template_header_navbar_text_center"
-                       data-customize-website-variable="logo_hamburger"
+                       data-customize-website-variable="'logo_hamburger'"
                        string="Logo - Hamburger (cover)"/>
         </we-select>
         <we-select id="header_effect_list" string="Effect">
@@ -538,27 +538,27 @@
         <we-select string="Footer Template" data-variable="footer-template" data-reload="/">
             <we-button id="option_template_footer_products_contacts_about_us"
                        data-customize-website-views="website.footer_custom"
-                       data-customize-website-variable="products_contacts_about_us"
+                       data-customize-website-variable="'products_contacts_about_us'"
                        string="Products - Contacts - About us"/>
             <we-button id="option_template_footer_logo_about_us_below"
                        data-customize-website-views="website.template_footer_logo_about_us_below"
-                       data-customize-website-variable="logo_about_us_below"
+                       data-customize-website-variable="'logo_about_us_below'"
                        string="Logo - About us"/>
             <we-button id="option_template_footer_links_address_logo"
                        data-customize-website-views="website.template_footer_links_address_logo"
-                       data-customize-website-variable="links_address_logo"
+                       data-customize-website-variable="'links_address_logo'"
                        string="Links - Address - Logo"/>
             <we-button id="option_template_footer_name_logo_links_about_us"
                        data-customize-website-views="website.template_footer_name_logo_links_about_us"
-                       data-customize-website-variable="name_logo_links_about_us"
+                       data-customize-website-variable="'name_logo_links_about_us'"
                        string="Name - Logo - Links - About us"/>
             <we-button id="option_template_footer_logo_only"
                        data-customize-website-views="website.template_footer_logo_only"
-                       data-customize-website-variable="logo_only"
+                       data-customize-website-variable="'logo_only'"
                        string="Logo only"/>
             <we-button id="option_template_footer_address_logo"
                        data-customize-website-views="website.template_footer_address_logo"
-                       data-customize-website-variable="address_logo"
+                       data-customize-website-variable="'address_logo'"
                        string="Address - Logo"/>
         </we-select>
         <we-select string="Slideout Effect" data-variable="footer-effect" data-reload="/">
@@ -567,10 +567,10 @@
                        data-customize-website-variable=""/>
             <we-button string="Slide Hover"
                        data-customize-website-views="website.template_footer_slideout"
-                       data-customize-website-variable="slideout_slide_hover"/>
+                       data-customize-website-variable="'slideout_slide_hover'"/>
             <we-button string="Shadow"
                        data-customize-website-views="website.template_footer_slideout"
-                       data-customize-website-variable="slideout_shadow"/>
+                       data-customize-website-variable="'slideout_shadow'"/>
         </we-select>
         <we-checkbox string="Copyright"
                 data-customize-website-views="website.footer_no_copyright|"
@@ -732,9 +732,9 @@
             <we-input data-customize-website-variable="null" data-variable="font-size-base" data-unit="px" data-save-unit="rem"/>
         </we-row>
         <we-select string="Links Underline" data-variable="link-underline">
-            <we-button data-customize-website-variable="never">Never</we-button>
-            <we-button data-customize-website-variable="hover">On Hover</we-button>
-            <we-button data-customize-website-variable="always">Always</we-button>
+            <we-button data-customize-website-variable="'never'">Never</we-button>
+            <we-button data-customize-website-variable="'hover'">On Hover</we-button>
+            <we-button data-customize-website-variable="'always'">Always</we-button>
         </we-select>
         <we-fontfamilypicker string="Headings" data-variable="headings-font-number"/>
         <we-fontfamilypicker string="Buttons Font" data-variable="buttons-font-number"/>