diff --git a/addons/web/static/src/scss/bootstrap_overridden_frontend.scss b/addons/web/static/src/scss/bootstrap_overridden_frontend.scss
index b36ccc0ae24..d7f30a8d869 100644
--- a/addons/web/static/src/scss/bootstrap_overridden_frontend.scss
+++ b/addons/web/static/src/scss/bootstrap_overridden_frontend.scss
@@ -2,4 +2,4 @@
//
// Font, line-height, and color for body text, headings, and more.
-$font-size-base: $o-theme-font-size-base !default;
+$font-size-base: (14 / 16) * 1rem !default;
diff --git a/addons/web/static/src/scss/primary_variables.scss b/addons/web/static/src/scss/primary_variables.scss
index 6610cd97c73..b241ebfad19 100644
--- a/addons/web/static/src/scss/primary_variables.scss
+++ b/addons/web/static/src/scss/primary_variables.scss
@@ -112,6 +112,3 @@ $o-kanban-mobile-empty-height: $o-kanban-image-width;
// Used to manage spacing in complex dropdown menu
$o-kanban-dashboard-dropdown-complex-gap: 5px;
-
-// For the frontend part
-$o-theme-font-size-base: (14 / 16) * 1rem;
diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss
index c178844b095..d0fa36444c4 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -100,6 +100,7 @@ $o-we-toolbar-height: 32px;
// Used to preserve web_editor and website UI from themes customizations
@mixin o-w-preserve-base {
+ font-size: $o-we-font-size;
font-family: $o-we-font-family;
line-height: 1.5;
color: $o-we-color-divider;
@@ -116,6 +117,24 @@ $o-we-toolbar-height: 32px;
color: $o-we-color-dark;
font-weight: bold;
}
+ h1, .h1 {
+ font-size: 2.4 * $o-we-font-size;
+ }
+ h2, .h2 {
+ font-size: 1.5 * $o-we-font-size;
+ }
+ h3, .h3 {
+ font-size: 1.3 * $o-we-font-size;
+ }
+ h4, .h4 {
+ font-size: 1.2 * $o-we-font-size;
+ }
+ h5, .h5 {
+ font-size: 1.1 * $o-we-font-size;
+ }
+ h6, .h6 {
+ font-size: $o-we-font-size;
+ }
}
@mixin o-w-preserve-links {
@@ -190,6 +209,10 @@ $o-we-toolbar-height: 32px;
text-align: left;
}
}
+
+ .close {
+ font-size: 1.5 * $o-we-font-size;
+ }
}
@mixin o-w-preserve-tabs {
diff --git a/addons/website/static/src/scss/bootstrap_overridden.scss b/addons/website/static/src/scss/bootstrap_overridden.scss
index 011e16511f5..89b6ce93036 100644
--- a/addons/website/static/src/scss/bootstrap_overridden.scss
+++ b/addons/website/static/src/scss/bootstrap_overridden.scss
@@ -27,6 +27,15 @@ $body-color: palette-color('text') !default;
$font-family-sans-serif: $o-theme-font !default;
+$font-size-base: o-website-value('font-size-base') !default;
+
+$h1-font-size: $font-size-base * $o-theme-h1-font-size-multiplier !default;
+$h2-font-size: $font-size-base * $o-theme-h2-font-size-multiplier !default;
+$h3-font-size: $font-size-base * $o-theme-h3-font-size-multiplier !default;
+$h4-font-size: $font-size-base * $o-theme-h4-font-size-multiplier !default;
+$h5-font-size: $font-size-base * $o-theme-h5-font-size-multiplier !default;
+$h6-font-size: $font-size-base * $o-theme-h6-font-size-multiplier !default;
+
$headings-font-family: $o-theme-headings-font !default;
$headings-color: palette-color('h1') !default;
diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss
index 02eef522380..c702c00b21e 100644
--- a/addons/website/static/src/scss/primary_variables.scss
+++ b/addons/website/static/src/scss/primary_variables.scss
@@ -47,6 +47,7 @@ $o-theme-figcaption-opacity: 0.6;
$o-base-website-values-palette: (
'logo-height': null, // Default to navbar height (see portal)
'header-font-size': null, // Default to BS (normal font-size)
+ 'font-size-base': 1rem, // Need a set value as the value is used in bootstrap_overridden files
'font-number': 1,
'headings-font-number': 1,
'navbar-font-number': 1,
@@ -68,6 +69,15 @@ $o-user-website-values: () !default;
// Fonts
//------------------------------------------------------------------------------
+// Those are BS values, except BS hardcodes them inside the $hx-font-size
+// variables directly and don't make them customizable.
+$o-theme-h1-font-size-multiplier: 2.5 !default;
+$o-theme-h2-font-size-multiplier: 2 !default;
+$o-theme-h3-font-size-multiplier: 1.75 !default;
+$o-theme-h4-font-size-multiplier: 1.5 !default;
+$o-theme-h5-font-size-multiplier: 1.25 !default;
+$o-theme-h6-font-size-multiplier: 1 !default;
+
$o-theme-fonts: (
('Roboto', sans-serif),
('Open Sans', sans-serif),
@@ -92,3 +102,8 @@ $o-theme-font-names: (
'Noto Serif',
'Arvo',
) !default;
+
+// TODO improve this: we should not have multiple lists regarding fonts but
+// instead a unique map: 'name' -> 'config', with config containing the font
+// properties configuration + basic info (url, font-family).
+$o-theme-font-configs: () !default;
diff --git a/addons/website/static/src/scss/secondary_variables.scss b/addons/website/static/src/scss/secondary_variables.scss
index 68094734a72..a6292647ba6 100644
--- a/addons/website/static/src/scss/secondary_variables.scss
+++ b/addons/website/static/src/scss/secondary_variables.scss
@@ -3,11 +3,32 @@
// Website customizations
//------------------------------------------------------------------------------
+@function o-add-font-config($values) {
+ $types: ('base': 'font-number', 'headings': 'headings-font-number', 'navbar': 'navbar-font-number', 'buttons': 'buttons-font-number');
+ @each $type, $number-label in $types {
+ $number: map-get($values, $number-label) or map-get($o-base-website-values-palette, $number-label);
+ @if $number <= length($o-theme-font-names) { // At least useful because of google fonts
+ $font-name: nth($o-theme-font-names, $number);
+ $font-config: map-get($o-theme-font-configs, $font-name);
+ @if $font-config {
+ $type-font-config: map-get($font-config, $type);
+ @if $type-font-config {
+ $values: map-merge($values, $type-font-config);
+ }
+ }
+ }
+ }
+ @return $values;
+}
+
// By default, most website palette values are null. Each null value is
// automatically replaced with corresponsing values in chosen default values
// palette.
$-website-values-default: nth($o-website-values-palettes, $o-website-values-palette-number);
$-actual-user-website-values-palette: map-merge($-website-values-default, o-map-omit($o-user-website-values));
+// Default font selection + User font selection have been merged, now need to
+// add the right associated font config while still forcing any user override
+$-actual-user-website-values-palette: map-merge(o-add-font-config($-actual-user-website-values-palette), o-map-omit($o-user-website-values));
$o-website-values-palettes: append($o-website-values-palettes, $-actual-user-website-values-palette);
// Enable last website values palette, which is now the user customized one
@@ -88,6 +109,7 @@ $o-theme-fonts: $-with-support-theme-fonts;
$o-theme-navbar-logo-height: o-website-value('logo-height') !default;
$o-theme-navbar-fixed-logo-height: o-website-value('fixed-logo-height') !default;
+
$o-theme-font: nth($o-theme-fonts, o-website-value('font-number')) !default;
$o-theme-headings-font: nth($o-theme-fonts, o-website-value('headings-font-number')) !default;
$o-theme-navbar-font: nth($o-theme-fonts, o-website-value('navbar-font-number')) !default;
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index cf06cc51ddc..c1513a0c96d 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -654,6 +654,7 @@
+