From 02a321cffb2da60a86b960e75c445e37094567b4 Mon Sep 17 00:00:00 2001 From: Martin Trigaux Date: Mon, 1 Apr 2019 14:14:44 +0000 Subject: [PATCH] [FIX] web: use specific font for Arabic, Hebrew and Cyrillic alphabet MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- .../lib/bootswatch/cyborg/_variables.scss | 2 +- .../static/src/scss/bootstrap_overridden.scss | 2 +- addons/web/static/src/scss/fonts.scss | 30 +++++++++++++++++++ addons/web/static/src/scss/layout_clean.scss | 2 +- .../static/src/scss/primary_variables.scss | 2 +- 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),