TCHAP: use marianne font

res/themes/tchap-common/css/_fonts.pcss

@@ -0,0 +1,129 @@
+/* the 'src' links are relative to the bundle.css, which is in a subdirectory.
+ */
+
+
+@font-face {
+    font-family: "Marianne";
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src:
+        url("$(res)/fonts/Marianne/Marianne-Regular.woff2") format("woff2"),
+        url("$(res)/fonts/Marianne/Marianne-Regular.woff") format("woff");
+}
+@font-face {
+    font-family: "Marianne";
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src:
+        url("$(res)/fonts/Marianne/Marianne-Regular_Italic.woff2") format("woff2"),
+        url("$(res)/fonts/Marianne/Marianne-Regular_Italic.woff") format("woff");
+}
+
+@font-face {
+    font-family: "Marianne";
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src:
+        url("$(res)/fonts/Marianne/Marianne-Medium.woff2") format("woff2"),
+        url("$(res)/fonts/Marianne/Marianne-Medium.woff") format("woff");
+}
+@font-face {
+    font-family: "Marianne";
+    font-style: italic;
+    font-weight: 500;
+    font-display: swap;
+    src:
+        url("$(res)/fonts/Marianne/Marianne-Medium_Italic.woff2") format("woff2"),
+        url("$(res)/fonts/Marianne/Marianne-Medium_Italic.woff") format("woff");
+}
+
+@font-face {
+    font-family: "Marianne";
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src:
+        url("$(res)/fonts/Marianne/Marianne-Bold.woff2") format("woff2"),
+        url("$(res)/fonts/Marianne/Marianne-Bold.woff") format("woff");
+}
+@font-face {
+    font-family: "Marianne";
+    font-style: italic;
+    font-weight: 600;
+    font-display: swap;
+    src:
+        url("$(res)/fonts/Marianne/Marianne-Bold_Italic.woff2") format("woff2"),
+        url("$(res)/fonts/Marianne/Marianne-Bold_Italic.woff") format("woff");
+}
+
+@font-face {
+    font-family: "Marianne";
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src:
+        url("$(res)/fonts/Marianne/Marianne-ExtraBold.woff2") format("woff2"),
+        url("$(res)/fonts/Marianne/Marianne-ExtraBold.woff") format("woff");
+}
+@font-face {
+    font-family: "Marianne";
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src:
+        url("$(res)/fonts/Marianne/Marianne-ExtraBold_Italic.woff2") format("woff2"),
+        url("$(res)/fonts/Marianne/Marianne-ExtraBold_Italic.woff") format("woff");
+}
+
+/* latin-ext */
+@font-face {
+    font-family: "Inconsolata";
+    font-style: normal;
+    font-weight: 400;
+    src:
+        local("Inconsolata Regular"),
+        local("Inconsolata-Regular"),
+        url("$(res)/fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlX5qhExfHwNJU.woff2") format("woff2");
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: "Inconsolata";
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src:
+        local("Inconsolata Regular"),
+        local("Inconsolata-Regular"),
+        url("$(res)/fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlZ5qhExfHw.woff2") format("woff2");
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
+        U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+    font-family: "Inconsolata";
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src:
+        local("Inconsolata Bold"),
+        local("Inconsolata-Bold"),
+        url("$(res)/fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71n5_zaDpwm80E.woff2") format("woff2");
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: "Inconsolata";
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src:
+        local("Inconsolata Bold"),
+        local("Inconsolata-Bold"),
+        url("$(res)/fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71p5_zaDpwm.woff2") format("woff2");
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
+        U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

res/themes/tchap-dark/css/_tchap_custom_vars.pcss

@@ -1,6 +1,7 @@
 /* variables that are used by the components style
 should be loaded before res/themes/light-custom/css/_custom.pcss */
 :root {
+    --font-family: "Marianne", Arial, sans-serif;
     --private-color: #eb5757;
     --external-color: #f07a12;
     --forum-color: #27ae60;

res/themes/tchap-dark/css/tchap-dark.pcss

@@ -2,7 +2,7 @@
 @import "_tchap_custom_vars.pcss";
 @import "../../../../res/css/_font-sizes.pcss";
 @import "../../tchap-common/css/_paths.pcss";
-@import "../../../../res/themes/light/css/_fonts.pcss";
+@import "../../tchap-common/css/_fonts.pcss"; /* tchap custom fonts */
 @import "../../../../res/themes/light/css/_light.pcss"; /* base _light css */
 @import "../../../../res/themes/dark/css/_dark.pcss"; /* base _dark css */
 /* @import "../../../../res/themes/light-custom/css/_custom.pcss"; */ /* match css --vars to pcss $vars */

res/themes/tchap-light/css/_tchap_custom_vars.pcss

@@ -2,6 +2,7 @@
 should be loaded before res/themes/light-custom/css/_custom.pcss */
 
 body {
+    --font-family: "Marianne", Arial, sans-serif;
     --accent: #000091;
     --primary-color: #334ccc;
     --warning-color: #e1000f;

res/themes/tchap-light/css/tchap-light.pcss

@@ -1,7 +1,7 @@
 @import "_tchap_custom_vars.pcss";
 @import "../../../../res/css/_font-sizes.pcss"; /* font sizes from matrix-react-sdk */
 @import "../../tchap-common/css/_paths.pcss"; /* tchap custom path to load ressources inside matrix css */
-@import "../../../../res/themes/light/css/_fonts.pcss"; /* tchap custom fonts */
+@import "../../tchap-common/css/_fonts.pcss"; /* tchap custom fonts */
 @import "../../../../res/themes/light/css/_light.pcss"; /* base _light css */
 @import "../../../../res/themes/light-custom/css/_custom.pcss"; /* match css --vars to pcss $vars */
 @import "../../../../res/themes/light/css/_mods.pcss";

src/vector/index.html

@@ -66,6 +66,11 @@
                     if (path && path.includes("/Inter/")) { %>
                     <link rel="preload" as="font" href="<%= path %>" crossorigin="anonymous" />
                     <% } } %>
+
+                <% for (const tag of htmlWebpackPlugin.tags.headTags) { let path=tag.attributes && tag.attributes.href;
+                    if (path && path.includes("/Marianne/")) { %>
+                    <link rel="preload" as="font" href="<%= path %>" crossorigin="anonymous" />
+                    <% } } %>
 
 </head>
 

webpack.config.js

@@ -664,6 +664,11 @@ module.exports = (env, argv) => {
                 files: [{ match: /.*Inter.*\.woff2$/ }],
             }),
 
+            // :TCHAP: marianne-typo
+            new HtmlWebpackInjectPreload({
+                files: [{ match: /.*Marianne.*\.woff2$/ }],
+            }),
+            // end :TCHAP:
             // Upload to sentry if sentry env is present
             // This plugin throws an error on import on some platforms like ppc64le & s390x even if the plugin isn't called,
             // so we require it conditionally.