Fix arrow font issues

styles.css

@@ -9,7 +9,7 @@
 body {
   background: white;
   color: black;
-  font-family: "Roboto", serif;
+  font-family: 'Roboto', serif;
   font-weight: 400;
   font-style: normal;
 }
@@ -24,7 +24,7 @@ html {
   font-size: calc(min(3vw,3vh));
 }
 
-/* Font for Ferengi glyphs */
+/* Font for Ferengi glyphs. */
 @font-face {
   font-family: 'Ferengi';
   src: url('Ferengi.woff2') format('woff2');
@@ -34,6 +34,16 @@ html {
   font-family: 'Ferengi';
 }
 
+/* Font for arrows. */
+@font-face {
+  font-family: 'OpenArrow';
+  src: url('OpenArrow-Regular.woff2') format('woff2'),
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+  unicode-range: U+2190-21ff;
+}
+
 /* Always hidden. */
 .hidden {
   display: none;
@@ -123,6 +133,13 @@ body {
   padding: 0.2rem 0.5rem;
 
   z-index: 2;
+
+  /* The unicode symbols I'm using for these end up misaligned in Roboto.
+   * They look fine in Arial, but Android doesn't have that.
+   * Rather than load a web font for Arial or something like it, use a very
+   * small font that only contains arrow glyphs.
+   */
+  font-family: 'OpenArrow';
 }
 
 .nav-left {