[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

4 files changed, 30 insertions, 7 deletions

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) {}