Add multiple fonts

src/components/SettingsPanel.vue

@@ -1,5 +1,6 @@
 <script>
 import appIcon from '@components/AppIcon';
+import { applyHand, loadHand } from '@scripts/hands';
 
 /**
  * Account settings, saved one field at a time.
@@ -35,6 +36,9 @@ export default {
 				return [this.user.timezone].filter((sZone) => sZone !== '');
 			}
 		},
+		hands() {
+			return this.consts.hands || [];
+		},
 		languageNames() {
 			const oNames = new Intl.DisplayNames([this.lang.locale], {type: 'language'});
 			return this.languages.map((sCode) => ({
@@ -44,6 +48,23 @@ export default {
 		}
 	},
 	methods: {
+		/**
+		 * Show the hand on the page as soon as it is picked, before the save
+		 * comes back - choosing a hand is a visual decision, and waiting on a
+		 * round trip to see it makes the picker feel broken.
+		 */
+		async pickHand(sHandId) {
+			if(sHandId === this.user.hand) return;
+
+			await loadHand(this.hands, sHandId);
+			applyHand(this.hands, sHandId);
+			await this.set('hand', sHandId);
+
+			//The save is what settles it; if it failed, go back to the one the
+			//account actually has rather than leaving a lie on screen.
+			if(this.sError !== '') applyHand(this.hands, this.user.hand);
+		},
+
 		async set(sField, sValue) {
 			this.bBusy = true;
 			this.sError = '';
@@ -126,6 +147,29 @@ export default {
 				</select>
 			</div>
 
+			<div class="leaf__row">
+				<span class="paper-label">{{ lang.get('account.hand') }}</span>
+				<div class="hand-picker" role="radiogroup" :aria-label="lang.get('account.hand')">
+					<button
+						v-for="oHand in hands"
+						:key="oHand.id"
+						type="button"
+						class="hand-picker__option"
+						:class="(oHand.id === user.hand) ? 'hand-picker__option--on' : null"
+						role="radio"
+						:aria-checked="oHand.id === user.hand"
+						:disabled="bBusy"
+						:style="{fontFamily: oHand.family + ', cursive'}"
+						@click="pickHand(oHand.id)"
+					>
+						<!-- Written in itself: the only thing worth knowing about
+							a hand is what your words look like in it. -->
+						<span class="hand-picker__sample">{{ lang.get('account.hand_sample') }}</span>
+						<span class="hand-picker__name">{{ oHand.name }}</span>
+					</button>
+				</div>
+			</div>
+
 			<div class="leaf__row">
 				<label class="paper-label" for="set-tz">{{ lang.get('account.timezone') }}</label>
 				<select