[FIX] web: use specific font for Arabic, Hebrew and Cyrillic alphabet

The basic font-family offered on Odoo do not support a large set of characters
and rely on the system fonts for non-latin languages
On a system without specific fonts installed, the characters were replaced by �
For Hebrew, the system sans-serif font (at least on Windows pc) was too small.

Rely on the unicode-range range CSS descriptor to load a font only for a
specific range of unicode code.
https://developer.mozilla.org/en-US/docs/Web/CSS/%40font-face/unicode-range
This way, the fonts are ignored for English text (and you don't have to load
the fonts of every possible language).

Add Noto fonts that covers many charsets.
There is an heavy version for many charset and lighter ones for Arabic and Hebrew
More ranges can be added later

Serve the fonts on our CDN to avoid shipping several MB of fonts for everyone
but lazyload it when needed.

Fixes odoo/odoo#32228
Fixes odoo/odoo#21781

5 files changed, 34 insertions, 4 deletions

diff --git a/addons/theme_bootswatch/static/lib/bootswatch/cyborg/_variables.scss b/addons/theme_bootswatch/static/lib/bootswatch/cyborg/_variables.scss
index fda2a4bcc74..dc354a087ac 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", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
+$font-family-sans-serif: "Roboto", "Noto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !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 e8406c948e9..edd0065d287 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;
 //
 // Font, line-height, and color for body text, headings, and more.
 
-$font-family-sans-serif: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
+$font-family-sans-serif: "Noto", "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
 
 $font-size-base: $o-font-size-base;
 $line-height-base: $o-line-height-base;
diff --git a/addons/web/static/src/scss/fonts.scss b/addons/web/static/src/scss/fonts.scss
index bfabf4fe6fc..0a8793c9a18 100644
--- a/addons/web/static/src/scss/fonts.scss
+++ b/addons/web/static/src/scss/fonts.scss
@@ -4,6 +4,36 @@
 $lato-font-path: '../fonts/lato';
 
 @mixin lato-font($type, $weight, $style) {
+    // Cyrillic: U+0400-04FF, U+0500-052F
+    @font-face {
+        font-family: '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');
+        font-weight: $weight;
+        font-style: $style;
+        unicode-range: U+0400-04FF, U+0500-052F;
+    }
+    // Hebrew: U+0590-05FF, U+FB1D-FB4F
+    @font-face {
+        font-family: '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');
+        font-weight: $weight;
+        font-style: $style;
+        unicode-range: U+0590-05FF, U+FB1D-FB4F;
+    }
+    // Arabic: U+0600-06FF, U+0750-077F
+    @font-face {
+        font-family: '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');
+        font-weight: $weight;
+        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');
diff --git a/addons/web/static/src/scss/layout_clean.scss b/addons/web/static/src/scss/layout_clean.scss
index 910abc763a4..0a8f4b065af 100644
--- a/addons/web/static/src/scss/layout_clean.scss
+++ b/addons/web/static/src/scss/layout_clean.scss
@@ -1,5 +1,5 @@
 .o_clean_footer, .o_clean_header, .o_report_layout_clean {
-    font-family: 'Lato';
+    font-family: 'Lato', 'Noto';
     color: #000;
 }
 .o_clean_header {
diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss
index 6e3f9a5f39a..f4d800046fe 100644
--- a/addons/website/static/src/scss/primary_variables.scss
+++ b/addons/website/static/src/scss/primary_variables.scss
@@ -36,7 +36,7 @@ $o-user-theme-color-palette: () !default;
 //------------------------------------------------------------------------------
 
 $o-theme-fonts: (
-    (-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"), // This is BS default
+    (-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Noto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"), // This is BS default
     ('Open Sans', sans-serif),
     ('Source Sans Pro', sans-serif),
     ('Raleway', sans-serif),