ui: enhance font selection

packages/ui-default/pages/api.page.styl

@@ -3,7 +3,7 @@
   padding: 5px 40px 0px 0px !important
 
 .graphiql-container .docExplorerWrap
-  font-family: "Source Code Pro", "Consolas" !important
+  font-family: var(--code-font-family) !important
 
 .graphiql-container .doc-explorer-back
   overflow: hidden;

packages/ui-default/pages/home_preference.page.jsx

@@ -74,6 +74,10 @@ const page = new NamedPage('home_preference', () => {
     this.style.fontFamily = this.getAttribute('value');
     this.textContent = i18n(this.textContent.trim());
   });
+  function updateFont() {
+    this.style.fontFamily = $(this).val();
+  }
+  $('[name="fontFamily"], [name="codeFontFamily"]').on('change', updateFont).each(updateFont);
 });
 
 export default page;