Switch typeface to Heliotrope

README.md

@@ -69,6 +69,10 @@ If you open a PR, it'll give you a preview URL as well for testing.
 - https://www.twitch.tv/telnetthespire
 - [Slay the Spire Reference Spreadsheet](https://docs.google.com/spreadsheets/u/1/d/1ZsxNXebbELpcCi8N7FVOTNGdX_K9-BRC_LMgx4TORo4/edit#gid=1146624812)
 
+### Typeface
+
+Licenced from https://mbtype.com/
+
 ### Open source artwork
 
 - http://ronenness.github.io/RPGUI/

public/ui/styles/app.css

@@ -46,7 +46,9 @@ html {
 html,
 button {
 	font-family: 'concourse_t3', 'Port Lligat Slab', serif;
+	font-family: 'heliotrope_4', serif;
 	font-feature-settings: 'kern' 1;
+	font-feature-settings: 'liga' on;
 }
 
 body {
@@ -250,6 +252,7 @@ h2 {
 }
 .EnergyBadge > span {
 	transform: rotate(-45deg);
+	font-feature-settings: 'onum' on;
 }
 .no-energy .EnergyBadge {
 	background: #272d2b;

public/ui/styles/card.css

@@ -58,6 +58,8 @@
 	margin: -0.75rem  auto 0;
 	padding: 2px 5px 4px;
 	font-family: 'concourse_c3';
+	font-family: 'heliotrope_4_caps';
+	font-feature-settings: 'ss10';
 	font-size: 0.75rem;
 	background: hsl(191.3, 33.3%, 18.8%);
 	border: 1px solid hsla(0, 0%, 0%, 0.2);

public/ui/styles/fonts.css

@@ -39,3 +39,158 @@
 	font-weight: bold;
 	font-style: italic;
 }
+
+@font-face {
+	font-family: heliotrope_3;
+	font-style: normal;
+	font-weight: normal;
+	font-stretch: normal;
+	font-display: auto;
+	src: url('../fonts/heliotrope/heliotrope_3_regular.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: heliotrope_3;
+	font-style: italic;
+	font-weight: normal;
+	font-stretch: normal;
+	font-display: auto;
+	src: url('../fonts/heliotrope/heliotrope_3_italic.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: heliotrope_3;
+	font-style: normal;
+	font-weight: bold;
+	font-stretch: normal;
+	font-display: auto;
+	src: url('../fonts/heliotrope/heliotrope_3_bold.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: heliotrope_3;
+	font-style: italic;
+	font-weight: bold;
+	font-stretch: normal;
+	font-display: auto;
+	src: url('../fonts/heliotrope/heliotrope_3_bold_italic.woff2') format('woff2');
+}
+@font-face {
+	font-family: heliotrope_3_caps;
+	font-style: normal;
+	font-weight: normal;
+	font-stretch: normal;
+	font-display: auto;
+	src: url('../fonts/heliotrope/heliotrope_3_caps_regular.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: heliotrope_3_caps;
+	font-style: normal;
+	font-weight: bold;
+	font-stretch: normal;
+	font-display: auto;
+	src: url('../fonts/heliotrope/heliotrope_3_caps_bold.woff2') format('woff2');
+}
+@font-face {
+	font-family: heliotrope_4;
+	font-style: normal;
+	font-weight: normal;
+	font-stretch: normal;
+	font-display: auto;
+	src: url('../fonts/heliotrope/heliotrope_4_regular.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: heliotrope_4;
+	font-style: italic;
+	font-weight: normal;
+	font-stretch: normal;
+	font-display: auto;
+	src: url('../fonts/heliotrope/heliotrope_4_italic.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: heliotrope_4;
+	font-style: normal;
+	font-weight: bold;
+	font-stretch: normal;
+	font-display: auto;
+	src: url('../fonts/heliotrope/heliotrope_4_bold.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: heliotrope_4;
+	font-style: italic;
+	font-weight: bold;
+	font-stretch: normal;
+	font-display: auto;
+	src: url('../fonts/heliotrope/heliotrope_4_bold_italic.woff2') format('woff2');
+}
+@font-face {
+	font-family: heliotrope_4_caps;
+	font-style: normal;
+	font-weight: normal;
+	font-stretch: normal;
+	font-display: auto;
+	src: url('../fonts/heliotrope/heliotrope_4_caps_regular.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: heliotrope_4_caps;
+	font-style: normal;
+	font-weight: bold;
+	font-stretch: normal;
+	font-display: auto;
+	src: url('../fonts/heliotrope/heliotrope_4_caps_bold.woff2') format('woff2');
+}
+@font-face {
+	font-family: heliotrope_6;
+	font-style: normal;
+	font-weight: normal;
+	font-stretch: normal;
+	font-display: auto;
+	src: url('../fonts/heliotrope/heliotrope_6_regular.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: heliotrope_6;
+	font-style: italic;
+	font-weight: normal;
+	font-stretch: normal;
+	font-display: auto;
+	src: url('../fonts/heliotrope/heliotrope_6_italic.woff2') format('woff2');
+}
+@font-face {
+	font-family: heliotrope_6_caps;
+	font-style: normal;
+	font-weight: normal;
+	font-stretch: normal;
+	font-display: auto;
+	src: url('../fonts/heliotrope/heliotrope_6_caps_regular.woff2') format('woff2');
+}
+@font-face {
+	font-family: heliotrope_8;
+	font-style: normal;
+	font-weight: normal;
+	font-stretch: normal;
+	font-display: auto;
+	src: url('../fonts/heliotrope/heliotrope_8_regular.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: heliotrope_8;
+	font-style: italic;
+	font-weight: normal;
+	font-stretch: normal;
+	font-display: auto;
+	src: url('../fonts/heliotrope/heliotrope_8_italic.woff2') format('woff2');
+}
+@font-face {
+	font-family: heliotrope_8_caps;
+	font-style: normal;
+	font-weight: normal;
+	font-stretch: normal;
+	font-display: auto;
+	src: url('../fonts/heliotrope/heliotrope_8_caps_regular.woff2') format('woff2');
+}