ui: load builtin fonts

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

@@ -68,15 +68,44 @@ function initCodeLangHelper() {
   });
 }
 
+function supportFontFamily(f) {
+  const h = 'Arial';
+  if (f.toLowerCase() === h.toLowerCase()) return true;
+  const canvas = document.createElement('canvas');
+  canvas.width = 100;
+  canvas.height = 100;
+  const ctx = canvas.getContext('2d');
+  ctx.textAlign = 'center';
+  ctx.fillStyle = 'black';
+  ctx.textBaseline = 'middle';
+  const g = (j) => {
+    ctx.clearRect(0, 0, 100, 100);
+    ctx.font = `100px ${j}, ${h}`;
+    ctx.fillText('a', 50, 50);
+    const k = ctx.getImageData(0, 0, 100, 100).data;
+    return [].slice.call(k).filter((l) => l !== 0);
+  };
+  return g(h).join('') !== g(f).join('');
+}
+
 const page = new NamedPage('home_preference', () => {
   initCodeLangHelper();
   $('[name="fontFamily"] option, [name="codeFontFamily"] option').each(function () {
+    if (!supportFontFamily(this.value)) {
+      $(this).hide();
+      console.log(`Unsupported: ${this.value}`);
+    }
     this.style.fontFamily = this.getAttribute('value');
     this.textContent = i18n(this.textContent.trim());
   });
   function updateFont() {
     this.style.fontFamily = $(this).val();
   }
+  document.fonts.onloadingdone = () => {
+    $('[name="fontFamily"] option, [name="codeFontFamily"] option').each(function () {
+      if (supportFontFamily(this.value)) $(this).show();
+    });
+  };
   $('[name="fontFamily"], [name="codeFontFamily"]').on('change', updateFont).each(updateFont);
 });