[IMP] web, web_editor, website, spreadsheet: use system fonts

Use system fonts for backend and web-editor's UI.
This commit removes references to proprietary fonts and allows the OS
to use the system ones. The aim is to reduce http request and the
general footprint (see enterprise counter-part).

The new font-stack:

- apple-system (San Francisco): iOS Safari, macOS Safari, macOS Firefox
- BlinkMacSystemFont (San Francisco): macOS Chrome
- Segoe UI: Windows
- Roboto: Android, Chrome OS
- Helvetica Neue: old OSX versions
- Ubuntu: Ubuntu
- Liberation Sans: Linux (others)
- Arial: Any
- sans-serif: General fallback

This was actually already introduced for the website default theme and
as a general option with [1] but it was not complete: if reaching the
need to use Roboto of the font stack, the repo Roboto was used instead
of the potential system one. It was not shown during testing with the
previous font stack. With the new one, on Ubuntu, it was revealed as
the Ubuntu font comes after Roboto.

[1]: https://github.com/odoo/odoo/commit/c0f2f670eb087991cc9a6a67f4beea5f12bd15f2

task-2995248

closes odoo/odoo#101533

X-original-commit: 9f8f8f2ef88aee746819469c918b2d31ec29d031
Related: odoo/enterprise#31985
Signed-off-by: Adrien Dieudonné (adr) <adr@odoo.com>
This commit is contained in:
stefanorigano (SRI)
2022-09-29 11:13:10 +02:00
committed by qsm-odoo
parent 71a06e1aae
commit b633a95bb6
8 changed files with 15 additions and 10 deletions
@@ -34280,7 +34280,7 @@
display: grid;
grid-template-columns: auto 350px;
* {
font-family: "Roboto", "RobotoDraft", Helvetica, Arial, sans-serif;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Ubuntu, "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
&,
*,
-2
View File
@@ -60,7 +60,6 @@ This module provides the core of the Odoo Web Client.
'web/static/lib/select2/select2.css',
'web/static/lib/select2-bootstrap-css/select2-bootstrap.css',
'web/static/lib/daterangepicker/daterangepicker.css',
'web/static/fonts/fonts.scss',
'web/static/src/webclient/navbar/navbar.scss',
'web/static/src/legacy/scss/ui.scss',
'web/static/src/legacy/scss/mimetypes.scss',
@@ -333,7 +332,6 @@ This module provides the core of the Odoo Web Client.
'web/static/lib/select2/select2.css',
'web/static/lib/select2-bootstrap-css/select2-bootstrap.css',
'web/static/lib/daterangepicker/daterangepicker.css',
'web/static/fonts/fonts.scss',
'web/static/src/webclient/navbar/navbar.scss',
'web/static/src/legacy/scss/ui.scss',
'web/static/src/legacy/scss/mimetypes.scss',
+2 -1
View File
@@ -112,7 +112,7 @@ $caret-width: 4px !default;
//
// Font, line-height, and color for body text, headings, and more.
$font-family-sans-serif: o-add-unicode-support-font(("Lucida Grande", Helvetica, Verdana, Arial, sans-serif), 1) !default;
$font-family-sans-serif: $o-font-family-sans-serif !default;
$font-size-base: $o-font-size-base !default;
$line-height-base: $o-line-height-base !default;
@@ -123,6 +123,7 @@ $h3-font-size: $font-size-base * 1.3 !default;
$h4-font-size: $font-size-base * 1.2 !default;
$h5-font-size: $font-size-base * 1.1 !default;
$headings-font-family: $o-headings-font-family !default;
$headings-font-weight: bold !default;
$headings-color: $o-main-headings-color !default;
@@ -9,12 +9,12 @@ $o-font-size-base: 13rem * (1px / $o-root-font-size) !default;
$o-font-size-base-touch: 15px !default;
$o-line-height-base: 1.5 !default; // This is BS default
// This is the bootstrap default, it is duplicated here as we need to process
// Global sans-serif fonts stack, defined here as we need to process
// it before actually using it (to add more unicode support with the special
// Odoo font for example). Adding unicode support is not done directly here as
// this font can be used by the website where the unicode support is already
// automatically added.
$o-system-fonts: (system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji") !default;
$o-system-fonts: (-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Ubuntu, "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji") !default;
// Colors
// This is BS default
@@ -57,6 +57,11 @@ $o-theme-text-colors: (
$o-opacity-disabled: .5 !default;
$o-opacity-muted: .76 !default;
$o-font-family-sans-serif: o-add-unicode-support-font($o-system-fonts) !default;
$o-font-family-monospace: o-add-unicode-support-font((SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace)) !default;
$o-headings-font-family: o-add-unicode-support-font(("SF Pro Display", $o-system-fonts)) !default;
$o-main-text-color: $o-gray-700 !default;
$o-main-bg-color: #f0eeee !default;
$o-main-color-muted: rgba($o-main-text-color, $o-opacity-muted) !default;
@@ -15,6 +15,7 @@
// We need this to be collapse because we want to add a border on the rows
// for sale order/invoice lines of type section.
border-collapse: collapse;
font-variant-numeric: tabular-nums;
> thead, > tbody, > tfoot {
> tr > :first-child {
@@ -26,7 +26,7 @@ $o-we-color-info: #6999a8 !default;
$o-we-bg: $o-we-bg-light !default;
$o-we-color: $o-we-fg-light !default;
$o-we-font-size: 13px !default;
$o-we-font-family: Roboto, 'Montserrat', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
$o-we-font-family: $o-font-family-sans-serif !default;
$o-we-accent: #01bad2 !default;
$o-we-border-width: 1px !default;
$o-we-border-color: $o-we-bg-light !default;
@@ -167,7 +167,7 @@ $o-we-sidebar-content-field-colorpicker-cc-height: 26px !default;
$o-we-sidebar-content-field-input-max-width: 60px !default;
$o-we-sidebar-content-field-input-bg: $o-we-bg-light !default;
$o-we-sidebar-content-field-input-font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$o-we-sidebar-content-field-input-font-family: $o-font-family-monospace !default;
$o-we-sidebar-content-field-input-unit-font-size: 11px !default;
$o-we-sidebar-content-field-input-border-color: $o-we-accent !default;
@@ -548,7 +548,7 @@ body.editor_enable.editor_has_snippets {
we-button:not(.fa) {
text-align: left;
font-family: Roboto, "Montserrat", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-family: $o-we-font-family;
font-size: 12px;
font-weight: 400;
@@ -244,5 +244,5 @@ body.editor_enable {
.o_homepage_editor_welcome_message {
padding-top: 128px;
padding-bottom: 128px;
font-family: Roboto, $font-family-sans-serif;
font-family: $o-font-family-sans-serif;
}