Fonts and ligatures

4 files changed, 49 insertions, 3 deletions

diff --git a/language-web/package-lock.json b/language-web/package-lock.json
index 49deae9f..335d3d74 100644
--- a/language-web/package-lock.json
+++ b/language-web/package-lock.json
@@ -8,6 +8,8 @@
       "version": "1.0.0",
       "license": "EPL-2.0",
       "dependencies": {
+        "@fontsource/fira-code": "^4.4.5",
+        "@fontsource/roboto": "^4.4.5",
         "@material-ui/core": "^4.11.4",
         "@material-ui/icons": "^4.11.2",
         "@material-ui/lab": "^4.0.0-alpha.58",
@@ -1676,6 +1678,16 @@
       "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
       "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
     },
+    "node_modules/@fontsource/fira-code": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/@fontsource/fira-code/-/fira-code-4.4.5.tgz",
+      "integrity": "sha512-ap1UKABzbPrUTgIB376n8CSJ7mbJYxGm52A60BHnGHjU2cSDBqNUAColdERgFWgLHfybWXQT13ZrNhAdynf9rg=="
+    },
+    "node_modules/@fontsource/roboto": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-4.4.5.tgz",
+      "integrity": "sha512-e3s7BF8MDBLpkA2r6lnl5PMnllF0McVvpolK9h2zzvVJw2WPexP1GTgMKHISlglYZRij2lKg/ZjQcIUUYDsAXg=="
+    },
     "node_modules/@material-ui/core": {
       "version": "4.11.4",
       "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.11.4.tgz",
@@ -14327,6 +14339,16 @@
       "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
       "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
     },
+    "@fontsource/fira-code": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/@fontsource/fira-code/-/fira-code-4.4.5.tgz",
+      "integrity": "sha512-ap1UKABzbPrUTgIB376n8CSJ7mbJYxGm52A60BHnGHjU2cSDBqNUAColdERgFWgLHfybWXQT13ZrNhAdynf9rg=="
+    },
+    "@fontsource/roboto": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-4.4.5.tgz",
+      "integrity": "sha512-e3s7BF8MDBLpkA2r6lnl5PMnllF0McVvpolK9h2zzvVJw2WPexP1GTgMKHISlglYZRij2lKg/ZjQcIUUYDsAXg=="
+    },
     "@material-ui/core": {
       "version": "4.11.4",
       "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.11.4.tgz",
diff --git a/language-web/package.json b/language-web/package.json
index 7ebe40d3..9804a841 100644
--- a/language-web/package.json
+++ b/language-web/package.json
@@ -39,6 +39,8 @@
     "webpack-subresource-integrity": "^5.0.0-alpha.5"
   },
   "dependencies": {
+    "@fontsource/fira-code": "^4.4.5",
+    "@fontsource/roboto": "^4.4.5",
     "@material-ui/core": "^4.11.4",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.58",
diff --git a/language-web/src/main/css/index.scss b/language-web/src/main/css/index.scss
index d9c9b4b4..7be9e1b6 100644
--- a/language-web/src/main/css/index.scss
+++ b/language-web/src/main/css/index.scss
@@ -1,10 +1,30 @@
+@use '@fontsource/roboto/scss/mixins' as Roboto;
+@use '@fontsource/fira-code/scss/mixins' as FiraCode;
+
 @import 'codemirror/lib/codemirror';
 @import 'codemirror/addon/hint/show-hint';
 @import 'codemirror/theme/material-darker';
 
+$robotoWeights: 300, 400, 500, 700;
+@each $weight in $robotoWeights {
+  @include Roboto.fontFace($weight: $weight);
+}
+
+$firaCodeWeights: 400, 600;
+@each $weight in $firaCodeWeights {
+  @include FiraCode.fontFace($weight: $weight);
+}
+
+body {
+  font-family: Roboto.$fontName;
+}
+
 .CodeMirror {
   font-size: 16px;
   height: 100%;
+  font-family: FiraCode.$fontName, monospace;
+  font-feature-settings: 'liga', 'calt', 'ss01', 'ss02', 'ss03', 'ss05', 'zero';
+  text-rendering: optimizeLegibility;
 }
 
 .annotations-gutter {
@@ -66,7 +86,6 @@
 }
 
 .problem-abstract {
-        font-style: italic;
 }
 
 .problem-reference {
@@ -74,7 +93,7 @@
 }
 
 .problem-containment {
-        font-weight: bold;
+        font-weight: 600;
 }
 
 .cm-quoted-name, .problem-enum-node {
@@ -82,7 +101,6 @@
 }
 
 .problem-new-node {
-        font-style: italic;
 }
 
 .problem-variable {
diff --git a/language-web/webpack.config.js b/language-web/webpack.config.js
index 5d3db7dd..8f0fb3f2 100644
--- a/language-web/webpack.config.js
+++ b/language-web/webpack.config.js
@@ -91,6 +91,10 @@ module.exports = {
           },
         ],
       },
+      {
+        test: /\.woff2?$/i,
+        loader: 'file-loader',
+      },
     ],
   },
   resolve: {