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

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]',