feat: add option to choose system fonts

Fixes #1799.

CHANGELOG.md

@@ -8,6 +8,8 @@ app.
 
 ## [Unreleased]
 
+- Added an option to use system fonts instead of bundled fonts
+  ([#1799](https://github.com/birchill/10ten-ja-reader/issues/1799)).
 - Fixed kanji incorrectly encoded as radicals not being displayed in kanji tab
   ([#1205](https://github.com/birchill/10ten-ja-reader/issues/1205#issuecomment-1783641017)).
 

_locales/en/messages.json

@@ -1703,6 +1703,18 @@
     "message": "Words",
     "description": "Label for checkbox to enable automatically expanding word entries"
   },
+  "options_font_face_bundled": {
+    "message": "Bundled fonts",
+    "description": "Label for bundled font option."
+  },
+  "options_font_face_label": {
+    "message": "Font face",
+    "description": "Label for font face drop-down."
+  },
+  "options_font_face_system": {
+    "message": "System fonts",
+    "description": "Label for system font option."
+  },
   "options_font_size_label": {
     "message": "Font size",
     "description": "Label for font size drop-down."

_locales/ja/messages.json

@@ -1703,6 +1703,18 @@
     "message": "単語",
     "description": "Label for checkbox to enable automatically expanding word entries"
   },
+  "options_font_face_bundled": {
+    "message": "搭載フォント",
+    "description": "Label for bundled font option."
+  },
+  "options_font_face_label": {
+    "message": "フォントフェイス",
+    "description": "Label for font face drop-down."
+  },
+  "options_font_face_system": {
+    "message": "システムフォント",
+    "description": "Label for system font option."
+  },
   "options_font_size_label": {
     "message": "フォントサイズ",
     "description": "Label for font size drop-down."

_locales/zh_hans/messages.json

@@ -1703,6 +1703,18 @@
     "message": "单词",
     "description": "Label for checkbox to enable automatically expanding word entries"
   },
+  "options_font_face_bundled": {
+    "message": "内置字体",
+    "description": "Label for bundled font option."
+  },
+  "options_font_face_label": {
+    "message": "字体",
+    "description": "Label for font face drop-down."
+  },
+  "options_font_face_system": {
+    "message": "系统字体",
+    "description": "Label for system font option."
+  },
   "options_font_size_label": {
     "message": "字体大小",
     "description": "Label for font size drop-down."

manifest.json.src

@@ -161,7 +161,7 @@
   /*#if mv3*/
   "web_accessible_resources": [{
     "resources": [
-      "css/popup-doc.css",
+      "css/popup-fonts.css",
       "css/selection.css",
       "docs/introducing-the-mouse.html",
       "fonts/*.woff2"
@@ -171,7 +171,7 @@
   }],
   /*#else*/
   "web_accessible_resources": [
-    "css/popup-doc.css",
+    "css/popup-fonts.css",
     "css/selection.css",
     "docs/introducing-the-mouse.html",
     "fonts/*.woff2"

src/common/config.ts

@@ -17,10 +17,11 @@ import { FxLocalData, getLocalFxData } from '../background/fx-data';
 import { isObject } from '../utils/is-object';
 import { stripFields } from '../utils/strip-fields';
 
-import {
+import type {
   AccentDisplay,
   AutoExpandableEntry,
   ContentConfigParams,
+  FontFace,
   FontSize,
   HighlightStyle,
   KeyboardKeys,
@@ -63,6 +64,7 @@ interface Settings {
   copySenses?: 'first' | 'all';
   dictLang?: DbLanguageId;
   enableTapLookup?: boolean;
+  fontFace?: FontFace;
   fontSize?: FontSize;
   fxCurrency?: string;
   highlightStyle?: HighlightStyle;
@@ -685,6 +687,32 @@ export class Config {
     }
   }
 
+  // fontFace: Defaults to 'bundled'
+
+  get fontFace(): FontFace {
+    return this.settings.fontFace === undefined
+      ? 'bundled'
+      : this.settings.fontFace;
+  }
+
+  set fontFace(value: FontFace) {
+    if (
+      (this.settings.fontFace !== undefined &&
+        this.settings.fontFace === value) ||
+      (typeof this.settings.fontFace === 'undefined' && value === 'bundled')
+    ) {
+      return;
+    }
+
+    if (value !== 'bundled') {
+      this.settings.fontFace = value;
+      void browser.storage.sync.set({ fontFace: value });
+    } else {
+      this.settings.fontFace = undefined;
+      void browser.storage.sync.remove('fontFace');
+    }
+  }
+
   // fontSize: Defaults to normal
 
   get fontSize(): FontSize {
@@ -1273,6 +1301,7 @@ export class Config {
               timestamp: this.fxData.timestamp,
             }
           : undefined,
+      fontFace: this.fontFace,
       fontSize: this.fontSize,
       highlightStyle: this.highlightStyle,
       holdToShowKeys: this.holdToShowKeys

src/common/content-config-params.ts

@@ -42,6 +42,8 @@ export type AccentDisplay =
 
 export type AutoExpandableEntry = 'words' | 'kanji';
 
+export type FontFace = 'bundled' | 'system';
+
 export type FontSize = 'normal' | 'large' | 'xl';
 
 export type PartOfSpeechDisplay = 'expl' | 'code' | 'none';
@@ -79,6 +81,9 @@ export interface ContentConfigParams {
   // for the rate.
   fx: { currency: string; rate: number; timestamp: number } | undefined;
 
+  // The fonts to use in the popup.
+  fontFace: FontFace;
+
   // The font size to use for the popup.
   fontSize: FontSize;
 

src/content/content-config.ts

@@ -142,6 +142,9 @@ export class ContentConfig implements ContentConfigParams {
   get fx() {
     return this.params.fx;
   }
+  get fontFace() {
+    return this.params.fontFace;
+  }
   get fontSize() {
     return this.params.fontSize;
   }

src/content/content.ts

@@ -88,6 +88,7 @@ import {
   isPopupVisible,
   isPopupWindowHostElem,
   removePopup,
+  setFontFace,
   setFontSize,
   setPopupStyle,
 } from './popup/popup';
@@ -435,6 +436,10 @@ export class ContentHandler {
             : this.touchClickTracker.disable();
           break;
 
+        case 'fontFace':
+          setFontFace(value);
+          break;
+
         case 'fontSize':
           setFontSize(value);
           break;
@@ -2215,6 +2220,7 @@ export class ContentHandler {
       displayMode,
       fixedPosition: options?.fixPosition ? this.getFixedPosition() : undefined,
       fixMinHeight: options.fixMinHeight,
+      fontFace: this.config.fontFace,
       fontSize: this.config.fontSize,
       fxData: this.config.fx,
       getCursorClearanceAndPos: this.getCursorClearanceAndPos.bind(

src/content/popup/font-styles.ts

@@ -0,0 +1,21 @@
+import browser from 'webextension-polyfill';
+
+import { html } from '../../utils/builder';
+
+export function addFontStyles() {
+  if (document.getElementById('tenten-font-styles')) {
+    return;
+  }
+
+  (document.head || document.documentElement).append(
+    html('link', {
+      id: 'tenten-font-styles',
+      rel: 'stylesheet',
+      href: browser.runtime.getURL('css/popup-fonts.css'),
+    })
+  );
+}
+
+export function removeFontStyles() {
+  document.getElementById('tenten-font-styles')?.remove();
+}

src/content/popup/popup.css

@@ -141,6 +141,10 @@
     background: var(--bg-color);
     border: 1px solid var(--border-color);
 
+    font-family: Meiryo, sans-serif;
+  }
+
+  .window.bundled-fonts {
     font-family: '10ten Inter', '10ten Noto Sans JP', sans-serif;
     font-feature-settings: 'calt', 'case', 'cv01', 'cv03', 'cv04', 'cv11',
       'ss03';

src/content/popup/popup.ts

@@ -1,8 +1,9 @@
-import { FontSize } from '../../common/content-config-params';
+import type { FontFace, FontSize } from '../../common/content-config-params';
 import { getThemeClass } from '../../utils/themes';
 
 import { removeContentContainer } from '../content-container';
 
+import { addFontStyles, removeFontStyles } from './font-styles';
 import { getPopupContainer } from './popup-container';
 
 export function isPopupVisible(): boolean {
@@ -16,13 +17,28 @@ export function hidePopup() {
 
 export function removePopup() {
   removeContentContainer(['rikaichamp-window', 'tenten-ja-window']);
-  document.getElementById('tenten-doc-styles')?.remove();
+  removeFontStyles();
 }
 
 export function isPopupWindowHostElem(target: EventTarget | null): boolean {
   return target instanceof HTMLElement && target.id === 'tenten-ja-window';
 }
 
+export function setFontFace(fontFace: FontFace) {
+  const popupWindow = getPopupWindow();
+  if (!popupWindow) {
+    return;
+  }
+
+  if (fontFace === 'bundled') {
+    addFontStyles();
+    popupWindow.classList.add('bundled-fonts');
+  } else {
+    removeFontStyles();
+    popupWindow.classList.remove('bundled-fonts');
+  }
+}
+
 export function setFontSize(size: FontSize) {
   const popupWindow = getPopupWindow();
   if (!popupWindow) {

src/content/popup/render-popup.ts

@@ -1,7 +1,5 @@
 /// <reference path="../../common/css.d.ts" />
-import browser from 'webextension-polyfill';
-
-import { FontSize } from '../../common/content-config-params';
+import type { FontFace, FontSize } from '../../common/content-config-params';
 
 import { html } from '../../utils/builder';
 import { Point } from '../../utils/geometry';
@@ -17,6 +15,7 @@ import { renderCloseButton } from './close';
 import { renderCopyOverlay } from './copy-overlay';
 import { CopyState } from './copy-state';
 import { updateExpandable } from './expandable';
+import { addFontStyles, removeFontStyles } from './font-styles';
 import { renderKanjiEntries } from './kanji';
 import { renderMetadata } from './metadata';
 import { renderNamesEntries } from './names';
@@ -38,12 +37,17 @@ export function renderPopup(
   // definitions to the main document.
   //
   // [1] e.g see https://issues.chromium.org/issues/41085401
-  addDocStyles();
+  if (!options.fontFace || options.fontFace === 'bundled') {
+    addFontStyles();
+  } else {
+    removeFontStyles();
+  }
 
   const container = options.container || getDefaultContainer();
   const windowElem = resetContainer({
     host: container,
     displayMode: options.displayMode,
+    fontFace: options.fontFace || 'bundled',
     fontSize: options.fontSize || 'normal',
     popupStyle: options.popupStyle,
   });
@@ -280,28 +284,16 @@ function getDefaultContainer(): HTMLElement {
   return defaultContainer;
 }
 
-function addDocStyles() {
-  if (document.getElementById('tenten-doc-styles')) {
-    return;
-  }
-
-  (document.head || document.documentElement).append(
-    html('link', {
-      id: 'tenten-doc-styles',
-      rel: 'stylesheet',
-      href: browser.runtime.getURL('css/popup-doc.css'),
-    })
-  );
-}
-
 function resetContainer({
   host,
   displayMode,
+  fontFace,
   fontSize,
   popupStyle,
 }: {
   host: HTMLElement;
   displayMode: DisplayMode;
+  fontFace: FontFace;
   fontSize: FontSize;
   popupStyle: string;
 }): HTMLElement {
@@ -317,6 +309,11 @@ function resetContainer({
   // Set theme
   windowDiv.classList.add(getThemeClass(popupStyle));
 
+  // Font face
+  if (fontFace === 'bundled') {
+    windowDiv.classList.add('bundled-fonts');
+  }
+
   // Font size
   if (fontSize !== 'normal') {
     windowDiv.classList.add(`font-${fontSize}`);

src/content/popup/show-popup.ts

@@ -3,6 +3,7 @@ import type { MajorDataSeries } from '@birchill/jpdict-idb';
 import type {
   AccentDisplay,
   ContentConfigParams,
+  FontFace,
   FontSize,
   PartOfSpeechDisplay,
 } from '../../common/content-config-params';
@@ -46,6 +47,7 @@ export type ShowPopupOptions = {
   displayMode: DisplayMode;
   fixedPosition?: PopupPositionConstraints;
   fixMinHeight?: boolean;
+  fontFace?: FontFace;
   fontSize?: FontSize;
   fxData: ContentConfigParams['fx'];
   getCursorClearanceAndPos: () => { cursorClearance: Box; cursorPos?: Point };