pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Martin Trigaux
2019-04-15 12:14:14 +00:00
parent 9ef33f4d43
commit 02a321cffb
5 changed files with 34 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/theme_bootswatch/static/lib/bootswatch/cyborg/_variables.scss
+1 -1
View File
@@ -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;
addons/web/static/src/scss/bootstrap_overridden.scss
Vendored
+1 -1
View File
@@ -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;
addons/web/static/src/scss/fonts.scss
+30
View File
@@ -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');
addons/web/static/src/scss/layout_clean.scss
+1 -1
View File
@@ -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 {
addons/website/static/src/scss/primary_variables.scss
+1 -1
View File
@@ -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),