Preloading fonts and fallback options

Author: Jasonvdb

src/style/fonts/Neue Haas Grotesk Display Pro 75 Bold.woff2 public/fonts/Neue Haas Grotesk Display Pro 75 Bold.woff2

@@ -25,6 +25,36 @@
 
     <meta property="og:site_name" content="Blocktank" />
 
+    <link rel="preload" href="/fonts/NeueHaasDisplay-Thin.woff2" as="font" type="font/woff" crossorigin>
+    <link rel="preload" href="/fonts/NeueHaasDisplay-Roman.woff2" as="font" type="font/woff" crossorigin>
+    <link rel="preload" href="/fonts/NeueHaasDisplay-Medium.woff2" as="font" type="font/woff" crossorigin>
+
+    <style rel="preload" type='text/css'>
+      @font-face {
+        font-family: 'Neue Haas Grotesk Display Pro';
+        font-style: normal;
+        font-display: swap;
+        font-weight: 200;
+        src: url('/fonts/NeueHaasDisplay-Thin.woff2') format('woff2')
+      }
+
+      @font-face {
+        font-family: 'Neue Haas Grotesk Display Pro';
+        font-style: normal;
+        font-display: swap;
+        font-weight: 400;
+        src: url('/fonts/NeueHaasDisplay-Roman.woff2') format('woff2')
+      }
+
+      @font-face {
+        font-family: 'Neue Haas Grotesk Display Pro';
+        font-style: normal;
+        font-display: swap;
+        font-weight: 600;
+        src: url('/fonts/NeueHaasDisplay-Medium.woff2') format('woff2')
+      }
+    </style>
+
 
     <!--    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />-->
     <!--

src/style/fonts/NeueHaasDisplay-Black.woff2 public/fonts/NeueHaasDisplay-Black.woff2

@@ -1,34 +1,9 @@
 // @see https://stackoverflow.com/questions/11002820/why-should-we-include-ttf-eot-woff-svg-in-a-font-face
 
-@font-face {
-  font-family: 'Neue Haas Grotesk Display Pro';
-  font-style: normal;
-  font-display: swap;
-  font-weight: 200;
-  src: url('/style/fonts/NeueHaasDisplay-Thin.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'Neue Haas Grotesk Display Pro';
-  font-style: normal;
-  font-display: swap;
-  font-weight: 400;
-  src: url('/style/fonts/NeueHaasDisplay-Roman.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'Neue Haas Grotesk Display Pro';
-  font-style: normal;
-  font-display: swap;
-  font-weight: 600;
-  src: url('/style/fonts/NeueHaasDisplay-Medium.woff2') format('woff2');
-}
-
 @import './style/variables';
 @import "~bootstrap/scss/bootstrap";
 @import './style/bootswatch';
 
-
 input:focus,
 select:focus,
 textarea:focus,

src/style/fonts/NeueHaasDisplay-Light.woff2 public/fonts/NeueHaasDisplay-Light.woff2

@@ -20,7 +20,7 @@ export type IFormErrors = {
 
 const inboundTip: TooltipProps = {
 	title: 'My receiving capacity',
-	body: 'This is the amount of sats you will be able to receive in payments. The amount must be at least double that of your \\‘spending balance\\’. Maximum receiving capacity is 50 000 000 sats.'
+	body: 'This is the amount of sats you will be able to receive in payments. The amount must be at least double that of your ‘spending balance’. Maximum receiving capacity is 50 000 000 sats.'
 };
 
 const spendingTip: TooltipProps = {
@@ -35,7 +35,6 @@ const durationTip: TooltipProps = {
 
 function ConfigurePage(): JSX.Element {
 	const { services } = useAppSelector(selectInfo);
-	const infoState = useAppSelector(selectInfoState);
 	const dispatch = useAppDispatch();
 	const [isLoading, setIsLoading] = useState(true);
 	const [isSubmitting, setIsSubmitting] = useState(false);
@@ -127,17 +126,25 @@ function ConfigurePage(): JSX.Element {
 		}
 
 		if (Number(remoteBalance) > product.max_channel_size) {
-			errors.remoteBalance = `Max receiving capacity is ${numberWithSpaces(product.max_channel_size)} sats`;
+			errors.remoteBalance = `Max receiving capacity is ${numberWithSpaces(
+				product.max_channel_size
+			)} sats`;
 		} else if (Number(remoteBalance) < product.min_channel_size) {
-			errors.remoteBalance = `Minimum receiving capacity is ${numberWithSpaces(product.min_channel_size)} sats`;
+			errors.remoteBalance = `Minimum receiving capacity is ${numberWithSpaces(
+				product.min_channel_size
+			)} sats`;
 		}
 
 		if (Number(localBalance) !== 0 && Number(localBalance) < product.min_channel_size) {
-			errors.localBalance = `Minimum spending balance is ${numberWithSpaces(product.min_channel_size)} sats`;
+			errors.localBalance = `Minimum spending balance is ${numberWithSpaces(
+				product.min_channel_size
+			)} sats`;
 		}
 
 		if (Number(localBalance) !== 0 && Number(localBalance) > product.max_channel_size) {
-			errors.localBalance = `Max spending balance is ${numberWithSpaces(product.max_channel_size)} sats`;
+			errors.localBalance = `Max spending balance is ${numberWithSpaces(
+				product.max_channel_size
+			)} sats`;
 		}
 
 		setFormErrors(errors);

src/style/fonts/NeueHaasDisplay-LightItalic.woff2 public/fonts/NeueHaasDisplay-LightItalic.woff2

@@ -56,7 +56,7 @@ $border-radius-sm:            0 !default;
 
 // stylelint-disable-next-line value-keyword-case
 //$font-family-sans-serif:      Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
-$font-family-sans-serif:      'Neue Haas Grotesk Display Pro', Sans-serif !default;
+$font-family-sans-serif:      'Neue Haas Grotesk Display Pro', "Helvetica Neue", Helvetica, sans-serif !default;
 
 $text-muted:                  rgba(255, 255, 255, .4) !default;