Improve Rich Text typography (#11157)

* Replace @fontsource/noto-serif with local Noto Serif fonts
* Make more use of CSS variables in theme
* Make sure the chosen font is used for monospace
* Increase the weight of section headings
* Set link colours
* Rename variable to --source-font-family

GitOrigin-RevId: e14856a619829e075e71bf2df9b799fe0b45acea

package-lock.json

@@ -4155,11 +4155,6 @@
       "resolved": "https://registry.npmjs.org/@fastify/error/-/error-2.0.0.tgz",
       "integrity": "sha512-wI3fpfDT0t7p8E6dA2eTECzzOd+bZsZCJ2Hcv+Onn2b7ZwK3RwD27uW2QDaMtQhAfWQQP+WNK7nKf0twLsBf9w=="
     },
-    "node_modules/@fontsource/noto-serif": {
-      "version": "4.5.11",
-      "resolved": "https://registry.npmjs.org/@fontsource/noto-serif/-/noto-serif-4.5.11.tgz",
-      "integrity": "sha512-Cq7M8oD0eNQbsQUJ6RVAi78Iw7DiVHrDKHkNyAW78jJ4UvIPNASApBsrhYvaExa9eD+Efd/kwhm+CWSImo5GtQ=="
-    },
     "node_modules/@google-cloud/bigquery": {
       "version": "5.10.0",
       "resolved": "https://registry.npmjs.org/@google-cloud/bigquery/-/bigquery-5.10.0.tgz",
@@ -38313,7 +38308,6 @@
         "@codemirror/view": "^6.7.1",
         "@contentful/rich-text-html-renderer": "^16.0.2",
         "@contentful/rich-text-types": "^16.0.2",
-        "@fontsource/noto-serif": "^4.5.11",
         "@google-cloud/bigquery": "^6.0.1",
         "@lezer/common": "^1.0.2",
         "@lezer/highlight": "^1.1.3",
@@ -43566,11 +43560,6 @@
       "resolved": "https://registry.npmjs.org/@fastify/error/-/error-2.0.0.tgz",
       "integrity": "sha512-wI3fpfDT0t7p8E6dA2eTECzzOd+bZsZCJ2Hcv+Onn2b7ZwK3RwD27uW2QDaMtQhAfWQQP+WNK7nKf0twLsBf9w=="
     },
-    "@fontsource/noto-serif": {
-      "version": "4.5.11",
-      "resolved": "https://registry.npmjs.org/@fontsource/noto-serif/-/noto-serif-4.5.11.tgz",
-      "integrity": "sha512-Cq7M8oD0eNQbsQUJ6RVAi78Iw7DiVHrDKHkNyAW78jJ4UvIPNASApBsrhYvaExa9eD+Efd/kwhm+CWSImo5GtQ=="
-    },
     "@google-cloud/bigquery": {
       "version": "5.10.0",
       "resolved": "https://registry.npmjs.org/@google-cloud/bigquery/-/bigquery-5.10.0.tgz",
@@ -49120,7 +49109,6 @@
         "@codemirror/view": "^6.7.1",
         "@contentful/rich-text-html-renderer": "^16.0.2",
         "@contentful/rich-text-types": "^16.0.2",
-        "@fontsource/noto-serif": "^4.5.11",
         "@google-cloud/bigquery": "^6.0.1",
         "@juggle/resize-observer": "^3.3.1",
         "@lezer/common": "^1.0.2",

services/web/frontend/fonts/noto-serif.css

@@ -0,0 +1,11 @@
+@font-face {
+  font-family: 'Noto Serif';
+  font-style: normal;
+  src: url('noto-serif/NotoSerif[wght].ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Noto Serif';
+  font-style: italic;
+  src: url('noto-serif/NotoSerif-Italic[wght].ttf') format('truetype');
+}

services/web/frontend/stylesheets/style.less

@@ -2,6 +2,7 @@
 @import (less) '../fonts/merriweather.css';
 @import (less) '../fonts/source-code-pro.css';
 @import (less) '../fonts/stix-two-math.css';
+@import (less) '../fonts/noto-serif.css';
 
 @is-overleaf-light: false;
 @show-rich-text: true;

services/web/package.json

@@ -81,7 +81,6 @@
     "@codemirror/view": "^6.7.1",
     "@contentful/rich-text-html-renderer": "^16.0.2",
     "@contentful/rich-text-types": "^16.0.2",
-    "@fontsource/noto-serif": "^4.5.11",
     "@google-cloud/bigquery": "^6.0.1",
     "@lezer/common": "^1.0.2",
     "@lezer/highlight": "^1.1.3",

services/web/webpack.config.js

@@ -142,7 +142,7 @@ module.exports = {
       },
       {
         // Load fonts
-        test: /\.(woff|woff2)$/,
+        test: /\.(woff2?|ttf|otf)$/,
         type: 'asset/resource',
         generator: {
           filename: 'fonts/[name]-[contenthash][ext]',