#6687 make improve fonts ui option work in lab

js/lab/package.json

@@ -45,6 +45,7 @@
   "files": [
     "dist/**/*.js",
     "lib/*",
-    "src/theme/static/*.css"
+    "src/theme/static/*.css",
+    "src/theme/static/fonts/**/*"
   ]
 }

js/lab/src/plugin/UIOptionFeaturesHelper.ts

@@ -26,6 +26,7 @@ export default class UIOptionFeaturesHelper {
   private showPublicationFeature: ShowPublicationFeature;
   private autoCloseBracketsFeature: AutoCloseBracketsFeature;
   private autoSaveFeature: AutoSaveFeature;
+  private improveFontsFeature: ImproveFontsFeature;
 
   constructor(
     private app: JupyterLab,
@@ -39,6 +40,7 @@ export default class UIOptionFeaturesHelper {
     this.showPublicationFeature = new ShowPublicationFeature(this.panel);
     this.autoCloseBracketsFeature = new AutoCloseBracketsFeature(this.panel);
     this.autoSaveFeature = new AutoSaveFeature(this.settings, this.app.commands);
+    this.improveFontsFeature = new ImproveFontsFeature();
 
     this.app.shell.activeChanged.connect((sender, args) => {
       if (args.newValue !== this.panel) {
@@ -71,12 +73,14 @@ export default class UIOptionFeaturesHelper {
     this.showPublicationFeature.init(data.beakerx.ui_options.show_publication);
     this.autoCloseBracketsFeature.init(data.beakerx.ui_options.auto_close)
     this.autoSaveFeature.init(data.beakerx.ui_options.auto_save);
+    this.improveFontsFeature.init(data.beakerx.ui_options.improve_fonts);
   }
 
   private updateFeatures(data): void {
     this.showPublicationFeature.update(data.beakerx.ui_options.show_publication);
     this.autoCloseBracketsFeature.update(data.beakerx.ui_options.auto_close)
     this.autoSaveFeature.update(data.beakerx.ui_options.auto_save);
+    this.improveFontsFeature.update(data.beakerx.ui_options.improve_fonts);
   }
 
   private loadSettings(): Promise<any> {
@@ -165,3 +169,21 @@ class AutoSaveFeature implements IUIOptionsFeature {
       });
   }
 }
+
+class ImproveFontsFeature implements IUIOptionsFeature {
+
+  public init(isEnabled: boolean): void {
+    if (isEnabled) {
+      document.body.classList.add('improveFonts');
+    }
+  }
+
+  public update(isEnabled: boolean): void {
+    if (isEnabled) {
+      document.body.classList.add('improveFonts');
+    } else {
+      document.body.classList.remove('improveFonts');
+    }
+  }
+
+}

js/lab/src/theme/static/fonts.css

@@ -14,6 +14,56 @@
  *  limitations under the License.
  */
 
-body {
+@font-face {
+  font-family: 'Roboto Mono';
+  src: url('fonts/robotomono/robotomono.woff') format('woff'),
+  url('fonts/robotomono/robotomono.ttf') format('truetype');
+
+  font-style: normal;
+  font-weight: normal;
+}
+
+@font-face {
+  font-family: 'Roboto Mono';
+  src: url('fonts/robotomono/robotomono-bold.woff') format('woff'),
+  url('fonts/robotomono/robotomono-bold.ttf') format('truetype');
+  font-weight: bold;
+}
+
+@font-face {
+  font-family: 'Lato';
+  src: url('fonts/lato/Lato-Regular.woff') format('woff'),
+  url('fonts/lato/Lato-Regular.ttf') format('truetype');
+
+  font-style: normal;
+  font-weight: normal;
+}
+
+@font-face {
+  font-family: 'Lato';
+  src: url('fonts/lato/Lato-Black.woff') format('woff'),
+  url('fonts/lato/Lato-Black.ttf') format('truetype');
+  font-weight: bold;
+}
+
+.improveFonts .CodeMirror pre,
+.improveFonts .rendered_html pre,
+.improveFonts .rendered_html code,
+.improveFonts .output_area pre {
+  font-family: "Roboto Mono", monospace, sans-serif;
+}
+
+div.output_text {
+  line-height: 1.3em;
+}
+
+.improveFonts .widget-html-content,
+.improveFonts .rendered_html,
+.improveFonts .cm-header-1,
+.improveFonts .cm-header-2,
+.improveFonts .cm-header-3,
+.improveFonts .cm-header-4,
+.improveFonts .cm-header-5,
+.improveFonts .cm-header-6 {
   font-family: "Lato", Helvetica, sans-serif;
-}
+}

js/notebook/src/tree/Widgets/UIOptions/UIOptionsWidget.ts

@@ -51,7 +51,7 @@ export class UIOptionsWidget extends Widget implements UIOptionsWidgetInterface
       id: 'improve_fonts',
       name: 'improve_fonts',
       label: 'Customize fonts (Roboto Mono and Lato)',
-      isLabSupported: false,
+      isLabSupported: true,
     },
     {
       id: 'show_publication',