From a314e2c908272345fb523c4419bd02285f263f7b Mon Sep 17 00:00:00 2001 From: Joey Parrish Date: Thu, 26 Dec 2024 20:49:11 -0800 Subject: [PATCH] Fix arrow font issues --- OpenArrow-Regular.woff2 | Bin 0 -> 8564 bytes styles.css | 30 ++++++++++++++++++++++++------ template.html | 2 +- 3 files changed, 25 insertions(+), 7 deletions(-) create mode 100644 OpenArrow-Regular.woff2 diff --git a/OpenArrow-Regular.woff2 b/OpenArrow-Regular.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..d8f86d10a4ad26785d453799946282d23db5c27c GIT binary patch literal 8564 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 literal 0 HcmV?d00001 diff --git a/styles.css b/styles.css index a36f624..155f7ab 100644 --- a/styles.css +++ b/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; @@ -118,11 +128,19 @@ body { cursor: pointer; box-sizing: border-box; - font-size: 2rem; - line-height: 1.4rem; - 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'; + /* With a consitent font for these symbols, now I can make some small + * alignment adjustments and know that it will always be correct. */ + font-size: 1.3rem; + line-height: 1.3rem; + padding: 0.2rem 0.8rem; + padding-top: 0.45rem; } .nav-left { diff --git a/template.html b/template.html index 3b2abe3..58f30ee 100644 --- a/template.html +++ b/template.html @@ -81,7 +81,7 @@ + >↶ {% endif %} {% if loop.first %}