[REF] website, *: improve use of unicode support font

* web, theme_bootswatch

Improvement of https://github.com/odoo/odoo/commit/02a321cffb2da60a86b960e75c445e37094567b4

- Clarify the name of the support font (to distinguish it from standard
  and google fonts and avoid confusion with Noto Sans and Noto Serif).

- Make sure the support font is added and can be added for all font
  definitions in odoo scss files thanks to a scss function.

Could be backported in 12.0 if judged necessary.

Part of https://github.com/odoo/odoo/pull/37293

7 files changed, 39 insertions, 9 deletions

diff --git a/addons/theme_bootswatch/static/lib/bootswatch/cyborg/_variables.scss b/addons/theme_bootswatch/static/lib/bootswatch/cyborg/_variables.scss
index dc354a087ac..f3c820ce00d 100644
--- a/addons/theme_bootswatch/static/lib/bootswatch/cyborg/_variables.scss
+++ b/addons/theme_bootswatch/static/lib/bootswatch/cyborg/_variables.scss
@@ -45,7 +45,7 @@ $body-color:    $gray-500 !default;
 
 // Fonts
 
-$font-family-sans-serif: "Roboto", "Noto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
+$font-family-sans-serif: o-add-unicode-support-font(("Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif), 2) !default;
 
 $font-size-base: .875rem !default;
 
diff --git a/addons/web/static/src/scss/bootstrap_overridden.scss b/addons/web/static/src/scss/bootstrap_overridden.scss
index dc1c2bab30c..2bfbc0ea266 100644
--- a/addons/web/static/src/scss/bootstrap_overridden.scss
+++ b/addons/web/static/src/scss/bootstrap_overridden.scss
@@ -61,7 +61,7 @@ $component-active-bg: $gray-200 !default;
 //
 // Font, line-height, and color for body text, headings, and more.
 
-$font-family-sans-serif: "Noto", "Lucida Grande", Helvetica, Verdana, Arial, sans-serif !default;
+$font-family-sans-serif: o-add-unicode-support-font(("Lucida Grande", Helvetica, Verdana, Arial, sans-serif), 1) !default;
 
 $font-size-base: $o-font-size-base !default;
 $line-height-base: $o-line-height-base !default;
diff --git a/addons/web/static/src/scss/bootstrap_overridden_report.scss b/addons/web/static/src/scss/bootstrap_overridden_report.scss
index a6e1cd23b32..33af8de1637 100644
--- a/addons/web/static/src/scss/bootstrap_overridden_report.scss
+++ b/addons/web/static/src/scss/bootstrap_overridden_report.scss
@@ -1,2 +1,2 @@
-// remove Noto Color Emoji
-$font-family-sans-serif: "Noto", "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
+// remove Emoji fonts
+$font-family-sans-serif: o-add-unicode-support-font(("Lucida Grande", Helvetica, Verdana, Arial, sans-serif), 1);
diff --git a/addons/web/static/src/scss/fonts.scss b/addons/web/static/src/scss/fonts.scss
index d1387316e68..26996d89c4c 100644
--- a/addons/web/static/src/scss/fonts.scss
+++ b/addons/web/static/src/scss/fonts.scss
@@ -6,7 +6,7 @@ $lato-font-path: '../fonts/lato';
 @mixin lato-font($type, $weight, $style) {
     // Cyrillic: U+0400-04FF, U+0500-052F
     @font-face {
-        font-family: 'Noto';
+        font-family: 'Odoo Unicode Support Noto';
         src: url('https://fonts.odoocdn.com/fonts/noto/NotoSans-#{$type}.woff2') format('woff2'),
              url('https://fonts.odoocdn.com/fonts/noto/NotoSans-#{$type}.woff') format('woff'),
              url('https://fonts.odoocdn.com/fonts/noto/NotoSans-#{$type}.ttf') format('truetype');
@@ -16,7 +16,7 @@ $lato-font-path: '../fonts/lato';
     }
     // Hebrew: U+0590-05FF, U+FB1D-FB4F
     @font-face {
-        font-family: 'Noto';
+        font-family: 'Odoo Unicode Support Noto';
         src: url('https://fonts.odoocdn.com/fonts/noto/NotoSansHebrew-#{$type}.woff2') format('woff2'),
              url('https://fonts.odoocdn.com/fonts/noto/NotoSansHebrew-#{$type}.woff') format('woff'),
              url('https://fonts.odoocdn.com/fonts/noto/NotoSansHebrew-#{$type}.ttf') format('truetype');
@@ -26,7 +26,7 @@ $lato-font-path: '../fonts/lato';
     }
     // Arabic: U+0600-06FF, U+0750-077F
     @font-face {
-        font-family: 'Noto';
+        font-family: 'Odoo Unicode Support Noto';
         src: url('https://fonts.odoocdn.com/fonts/noto/NotoSansArabic-#{$type}.woff2') format('woff2'),
              url('https://fonts.odoocdn.com/fonts/noto/NotoSansArabic-#{$type}.woff') format('woff'),
              url('https://fonts.odoocdn.com/fonts/noto/NotoSansArabic-#{$type}.ttf') format('truetype');
@@ -34,6 +34,7 @@ $lato-font-path: '../fonts/lato';
         font-style: $style;
         unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF;
     }
+
     @font-face {
         font-family: 'Lato';
         src: url('#{$lato-font-path}/Lato-#{$type}-webfont.eot');
@@ -44,7 +45,6 @@ $lato-font-path: '../fonts/lato';
         font-weight: $weight;
         font-style: $style;
     }
-
     @font-face {
         font-family: 'Lato-#{$type}';
         src: url('#{$lato-font-path}/Lato-#{$type}-webfont.eot');
diff --git a/addons/web/static/src/scss/utils.scss b/addons/web/static/src/scss/utils.scss
index 9c3187d01bc..77d9749111f 100644
--- a/addons/web/static/src/scss/utils.scss
+++ b/addons/web/static/src/scss/utils.scss
@@ -173,6 +173,29 @@
     }
 }
 
+// Odoo defines a limited Noto font-family for a small variety of unicode
+// characters that are not necessary defined in the user system or even defined
+// but not properly readable. This function allows to add this font family in a
+// given font list.
+//
+// @param {list} $font - a list of font names ending with the generic one.
+// @param {integer} [$index] - the position where to add the support font, if
+//        not given, it will be placed before the generic one.
+@function o-add-unicode-support-font($font, $index: false) {
+    @if $index == false {
+        $index: length($font);
+    }
+
+    $-with-support-font: ();
+    @for $i from 1 through length($font) {
+        @if $i == $index {
+            $-with-support-font: append($-with-support-font, 'Odoo Unicode Support Noto', $separator: comma);
+        }
+        $-with-support-font: append($-with-support-font, nth($font, $i), $separator: comma);
+    }
+
+    @return $-with-support-font;
+}
 
 // Mixin which allows to extend the BS4 bg-variant mixin
 @mixin o-bg-color-extension($color, $text-color, $with-muted) {}
diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss
index 102b0e9abb8..d6b84ff52e0 100644
--- a/addons/website/static/src/scss/primary_variables.scss
+++ b/addons/website/static/src/scss/primary_variables.scss
@@ -69,7 +69,7 @@ $o-user-website-values: () !default;
 //------------------------------------------------------------------------------
 
 $o-theme-fonts: (
-    ('Roboto', Noto, sans-serif),
+    ('Roboto', sans-serif),
     ('Open Sans', sans-serif),
     ('Source Sans Pro', sans-serif),
     ('Raleway', sans-serif),
diff --git a/addons/website/static/src/scss/secondary_variables.scss b/addons/website/static/src/scss/secondary_variables.scss
index 5c2a9a53e1e..e1a8f4462cf 100644
--- a/addons/website/static/src/scss/secondary_variables.scss
+++ b/addons/website/static/src/scss/secondary_variables.scss
@@ -58,6 +58,13 @@ $o-website-values-palette-number: length($o-website-values-palettes);
     }
 }
 
+// Add odoo unicode support for all fonts
+$-with-support-theme-fonts: ();
+@each $font in $o-theme-fonts {
+    $-with-support-theme-fonts: append($-with-support-theme-fonts, o-add-unicode-support-font($font));
+}
+$o-theme-fonts: $-with-support-theme-fonts;
+
 $o-theme-navbar-logo-height: o-website-value('logo-height') !default;
 $o-theme-font: nth($o-theme-fonts, o-website-value('font-number')) !default;
 $o-theme-headings-font: nth($o-theme-fonts, o-website-value('headings-font-number')) !default;