From 54f4c21f74b77eeaa3e34ce10e402ba58178c83b Mon Sep 17 00:00:00 2001
From: Adrian Estevez <adrianestevez@Adrians-MacBook-Pro.local>
Date: Wed, 14 Dec 2022 13:06:20 -0500
Subject: [PATCH 1/3] fix: rainbow legacy styles

---
 .../Application/rainbowLegacyStyles.js        | 195 +++++++-----------
 1 file changed, 73 insertions(+), 122 deletions(-)

diff --git a/src/components/Application/rainbowLegacyStyles.js b/src/components/Application/rainbowLegacyStyles.js
index deb6b93af..06a19d1eb 100644
--- a/src/components/Application/rainbowLegacyStyles.js
+++ b/src/components/Application/rainbowLegacyStyles.js
@@ -2,139 +2,90 @@ import React from 'react';
 import { createGlobalStyle } from 'styled-components';
 import { isServer } from '../../libs/utils';
 
-const fontsCDN = 'https://fonts.react-rainbow.io';
+const font = url => {
+    const xhr = new XMLHttpRequest();
+    xhr.open('GET', url, false);
+    xhr.send();
+    return xhr.responseText;
+};
 
-const LatoBlackEot = `${fontsCDN}/Lato-Black/Lato-Black.eot`;
-const LatoBlackSvg = `${fontsCDN}/Lato-Black/Lato-Black.svg`;
-const LatoBlackTtf = `${fontsCDN}/Lato-Black/Lato-Black.ttf`;
-const LatoBlackWoff = `${fontsCDN}/Lato-Black/Lato-Black.woff`;
-const LatoBlackWoff2 = `${fontsCDN}/Lato-Black/Lato-Black.woff2`;
+const changeFontFamily = (fontFace, newName) => {
+    const newFontFace = fontFace.replace(/Lato/g, newName);
+    return newFontFace;
+};
 
-const LatoBlackItalicEot = `${fontsCDN}/Lato-BlackItalic/Lato-BlackItalic.eot`;
-const LatoBlackItalicSvg = `${fontsCDN}/Lato-BlackItalic/Lato-BlackItalic.svg`;
-const LatoBlackItalicTtf = `${fontsCDN}/Lato-BlackItalic/Lato-BlackItalic.ttf`;
-const LatoBlackItalicWoff = `${fontsCDN}/Lato-BlackItalic/Lato-BlackItalic.woff`;
-const LatoBlackItalicWoff2 = `${fontsCDN}/Lato-BlackItalic/Lato-BlackItalic.woff2`;
+const latoBlack = changeFontFamily(
+    font('https://fonts.googleapis.com/css2?family=Lato:wght@900&display=swap').toString(),
+    'Lato Black',
+);
+const latoBlackItalic = changeFontFamily(
+    font(
+        'https://fonts.googleapis.com/css2?family=Lato:wght@900&family=Lato:ital,wght@0,900;1,900&display=swap',
+    ).toString(),
+    'Lato Black Italic',
+);
 
-const LatoBoldEot = `${fontsCDN}/Lato-Bold/Lato-Bold.eot`;
-const LatoBoldSvg = `${fontsCDN}/Lato-Bold/Lato-Bold.svg`;
-const LatoBoldTtf = `${fontsCDN}/Lato-Bold/Lato-Bold.ttf`;
-const LatoBoldWoff = `${fontsCDN}/Lato-Bold/Lato-Bold.woff`;
-const LatoBoldWoff2 = `${fontsCDN}/Lato-Bold/Lato-Bold.woff2`;
+const latoBold = changeFontFamily(
+    font('https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap').toString(),
+    'Lato Bold',
+);
+const latoBoldItalic = changeFontFamily(
+    font(
+        'https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Lato:ital,wght@0,700;1,700&display=swap',
+    ).toString(),
+    'Lato Bold Italic',
+);
 
-const LatoBoldItalicEot = `${fontsCDN}/Lato-BoldItalic/Lato-BoldItalic.eot`;
-const LatoBoldItalicSvg = `${fontsCDN}/Lato-BoldItalic/Lato-BoldItalic.svg`;
-const LatoBoldItalicTtf = `${fontsCDN}/Lato-BoldItalic/Lato-BoldItalic.ttf`;
-const LatoBoldItalicWoff = `${fontsCDN}/Lato-BoldItalic/Lato-BoldItalic.woff`;
-const LatoBoldItalicWoff2 = `${fontsCDN}/Lato-BoldItalic/Lato-BoldItalic.woff2`;
+const latoHairline = changeFontFamily(
+    font('https://fonts.googleapis.com/css2?family=Lato:wght@100&display=swap').toString(),
+    'Lato Hairline',
+);
+const latoHairlineItalic = changeFontFamily(
+    font(
+        'https://fonts.googleapis.com/css2?family=Lato:wght@100&family=Lato:ital,wght@0,100;1,100&display=swap',
+    ).toString(),
+    'Lato Hairline Italic',
+);
 
-const LatoHairlineEot = `${fontsCDN}/Lato-Hairline/Lato-Hairline.eot`;
-const LatoHairlineSvg = `${fontsCDN}/Lato-Hairline/Lato-Hairline.svg`;
-const LatoHairlineTtf = `${fontsCDN}/Lato-Hairline/Lato-Hairline.ttf`;
-const LatoHairlineWoff = `${fontsCDN}/Lato-Hairline/Lato-Hairline.woff`;
-const LatoHairlineWoff2 = `${fontsCDN}/Lato-Hairline/Lato-Hairline.woff2`;
+const latoLight = changeFontFamily(
+    font('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap').toString(),
+    'Lato Light',
+);
+const latoLightItalic = changeFontFamily(
+    font(
+        'https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Lato:ital,wght@0,300;1,300&display=swap',
+    ).toString(),
+    'Lato Light Italic',
+);
 
-const LatoHairlineItalicEot = `${fontsCDN}/Lato-HairlineItalic/Lato-HairlineItalic.eot`;
-const LatoHairlineItalicSvg = `${fontsCDN}/Lato-HairlineItalic/Lato-HairlineItalic.svg`;
-const LatoHairlineItalicTtf = `${fontsCDN}/Lato-HairlineItalic/Lato-HairlineItalic.ttf`;
-const LatoHairlineItalicWoff = `${fontsCDN}/Lato-HairlineItalic/Lato-HairlineItalic.woff`;
-const LatoHairlineItalicWoff2 = `${fontsCDN}/Lato-HairlineItalic/Lato-HairlineItalic.woff2`;
+const lato = changeFontFamily(
+    font('https://fonts.googleapis.com/css2?family=Lato:wght@400&display=swap').toString(),
+    'Lato',
+);
+const latoItalic = changeFontFamily(
+    font(
+        'https://fonts.googleapis.com/css2?family=Lato:wght@400&family=Lato:ital,wght@0,400;1,400&display=swap',
+    ).toString(),
+    'Lato Italic',
+);
 
-const LatoItalicEot = `${fontsCDN}/Lato-Italic/Lato-Italic.eot`;
-const LatoItalicSvg = `${fontsCDN}/Lato-Italic/Lato-Italic.svg`;
-const LatoItalicTtf = `${fontsCDN}/Lato-Italic/Lato-Italic.ttf`;
-const LatoItalicWoff = `${fontsCDN}/Lato-Italic/Lato-Italic.woff`;
-const LatoItalicWoff2 = `${fontsCDN}/Lato-Italic/Lato-Italic.woff2`;
+const legacyStyles = `
 
-const LatoLightEot = `${fontsCDN}/Lato-Light/Lato-Light.eot`;
-const LatoLightSvg = `${fontsCDN}/Lato-Light/Lato-Light.svg`;
-const LatoLightTtf = `${fontsCDN}/Lato-Light/Lato-Light.ttf`;
-const LatoLightWoff = `${fontsCDN}/Lato-Light/Lato-Light.woff`;
-const LatoLightWoff2 = `${fontsCDN}/Lato-Light/Lato-Light.woff2`;
+  ${latoBlack}
+  ${latoBlackItalic}
+  
+  ${latoBold}
+  ${latoBoldItalic}
 
-const LatoLightItalicEot = `${fontsCDN}/Lato-LightItalic/Lato-LightItalic.eot`;
-const LatoLightItalicSvg = `${fontsCDN}/Lato-LightItalic/Lato-LightItalic.svg`;
-const LatoLightItalicTtf = `${fontsCDN}/Lato-LightItalic/Lato-LightItalic.ttf`;
-const LatoLightItalicWoff = `${fontsCDN}/Lato-LightItalic/Lato-LightItalic.woff`;
-const LatoLightItalicWoff2 = `${fontsCDN}/Lato-LightItalic/Lato-LightItalic.woff2`;
+  ${latoHairline}
+  ${latoHairlineItalic}
 
-const LatoRegularEot = `${fontsCDN}/Lato-Regular/Lato-Regular.eot`;
-const LatoRegularSvg = `${fontsCDN}/Lato-Regular/Lato-Regular.svg`;
-const LatoRegularTtf = `${fontsCDN}/Lato-Regular/Lato-Regular.ttf`;
-const LatoRegularWoff = `${fontsCDN}/Lato-Regular/Lato-Regular.woff`;
-const LatoRegularWoff2 = `${fontsCDN}/Lato-Regular/Lato-Regular.woff2`;
+  ${latoLight}
+  ${latoLightItalic}
+
+  ${lato}
+  ${latoItalic}
 
-const legacyStyles = `
-@font-face {
-    font-family: 'Lato Black';
-    src: url(${LatoBlackEot});
-    src: url(${LatoBlackWoff2}) format("woff2"), url(${LatoBlackWoff}) format("woff"), url(${LatoBlackTtf}) format("truetype"), url("${LatoBlackSvg}#Lato-Black") format("svg"), url("${LatoBlackEot}?#iefix") format("embedded-opentype");
-    font-weight: normal;
-    font-style: normal; }
-  
-  @font-face {
-    font-family: 'Lato Black Italic';
-    src: url(${LatoBlackItalicEot});
-    src: url(${LatoBlackItalicWoff2}) format("woff2"), url(${LatoBlackItalicWoff}) format("woff"), url(${LatoBlackItalicTtf}) format("truetype"), url("${LatoBlackItalicSvg}#Lato-BlackItalic") format("svg"), url("${LatoBlackItalicEot}?#iefix") format("embedded-opentype");
-    font-weight: normal;
-    font-style: normal; }
-  
-  @font-face {
-    font-family: 'Lato Bold';
-    src: url(${LatoBoldEot});
-    src: url(${LatoBoldWoff2}) format("woff2"), url(${LatoBoldWoff}) format("woff"), url(${LatoBoldTtf}) format("truetype"), url("${LatoBoldSvg}#Lato-Bold") format("svg"), url("${LatoBoldEot}?#iefix") format("embedded-opentype");
-    font-weight: normal;
-    font-style: normal; }
-  
-  @font-face {
-    font-family: 'Lato Bold Italic';
-    src: url(${LatoBoldItalicEot});
-    src: url(${LatoBoldItalicWoff2}) format("woff2"), url(${LatoBoldItalicWoff}) format("woff"), url(${LatoBoldItalicTtf}) format("truetype"), url("${LatoBoldItalicSvg}#Lato-BoldItalic") format("svg"), url("${LatoBoldItalicEot}?#iefix") format("embedded-opentype");
-    font-weight: normal;
-    font-style: normal; }
-  
-  @font-face {
-    font-family: 'Lato Hairline';
-    src: url(${LatoHairlineEot});
-    src: url(${LatoHairlineWoff2}) format("woff2"), url(${LatoHairlineWoff}) format("woff"), url(${LatoHairlineTtf}) format("truetype"), url("${LatoHairlineSvg}#Lato-Hairline") format("svg"), url("${LatoHairlineEot}?#iefix") format("embedded-opentype");
-    font-weight: normal;
-    font-style: normal; }
-  
-  @font-face {
-    font-family: 'Lato Hairline Italic';
-    src: url(${LatoHairlineItalicEot});
-    src: url(${LatoHairlineItalicWoff2}) format("woff2"), url(${LatoHairlineItalicWoff}) format("woff"), url(${LatoHairlineItalicTtf}) format("truetype"), url("${LatoHairlineItalicSvg}#Lato-HairlineItalic") format("svg"), url("${LatoHairlineItalicEot}?#iefix") format("embedded-opentype");
-    font-weight: normal;
-    font-style: normal; }
-  
-  @font-face {
-    font-family: 'Lato Italic';
-    src: url(${LatoItalicEot});
-    src: url(${LatoItalicWoff2}) format("woff2"), url(${LatoItalicWoff}) format("woff"), url(${LatoItalicTtf}) format("truetype"), url("${LatoItalicSvg}#Lato-Italic") format("svg"), url("${LatoItalicEot}?#iefix") format("embedded-opentype");
-    font-weight: normal;
-    font-style: normal; }
-  
-  @font-face {
-    font-family: 'Lato Light';
-    src: url(${LatoLightEot});
-    src: url(${LatoLightWoff2}) format("woff2"), url(${LatoLightWoff}) format("woff"), url(${LatoLightTtf}) format("truetype"), url("${LatoLightSvg}#Lato-Light") format("svg"), url("${LatoLightEot}?#iefix") format("embedded-opentype");
-    font-weight: normal;
-    font-style: normal; }
-  
-  @font-face {
-    font-family: 'Lato Light Italic';
-    src: url(${LatoLightItalicEot});
-    src: url(${LatoLightItalicWoff2}) format("woff2"), url(${LatoLightItalicWoff}) format("woff"), url(${LatoLightItalicTtf}) format("truetype"), url("${LatoLightItalicSvg}#Lato-LightItalic") format("svg"), url("${LatoLightItalicEot}?#iefix") format("embedded-opentype");
-    font-weight: normal;
-    font-style: normal; }
-  
-  @font-face {
-    font-family: 'Lato';
-    src: url(${LatoRegularEot});
-    src: url(${LatoRegularWoff2}) format("woff2"), url(${LatoRegularWoff}) format("woff"), url(${LatoRegularTtf}) format("truetype"), url("${LatoRegularSvg}#Lato-Regular") format("svg"), url("${LatoRegularEot}?#iefix") format("embedded-opentype");
-    font-weight: normal;
-    font-style: normal; }
-  
   html {
     font-family: 'Lato', Arial, sans-serif;
     font-size: 100%;

From f25aa512b853c1a3ca884149ba4c02dde7b25bf3 Mon Sep 17 00:00:00 2001
From: Adrian Estevez <adrianestevez@Adrians-MacBook-Pro.local>
Date: Thu, 15 Dec 2022 19:23:34 -0500
Subject: [PATCH 2/3] fix: changing font family request in rainbow legacy
 styles

---
 .../Application/rainbowLegacyStyles.js        | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/Application/rainbowLegacyStyles.js b/src/components/Application/rainbowLegacyStyles.js
index 06a19d1eb..a45c4ccc5 100644
--- a/src/components/Application/rainbowLegacyStyles.js
+++ b/src/components/Application/rainbowLegacyStyles.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { createGlobalStyle } from 'styled-components';
 import { isServer } from '../../libs/utils';
 
-const font = url => {
+const fetchFont = url => {
     const xhr = new XMLHttpRequest();
     xhr.open('GET', url, false);
     xhr.send();
@@ -15,55 +15,55 @@ const changeFontFamily = (fontFace, newName) => {
 };
 
 const latoBlack = changeFontFamily(
-    font('https://fonts.googleapis.com/css2?family=Lato:wght@900&display=swap').toString(),
+    fetchFont('https://fonts.googleapis.com/css2?family=Lato:wght@900&display=swap').toString(),
     'Lato Black',
 );
 const latoBlackItalic = changeFontFamily(
-    font(
+    fetchFont(
         'https://fonts.googleapis.com/css2?family=Lato:wght@900&family=Lato:ital,wght@0,900;1,900&display=swap',
     ).toString(),
     'Lato Black Italic',
 );
 
 const latoBold = changeFontFamily(
-    font('https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap').toString(),
+    fetchFont('https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap').toString(),
     'Lato Bold',
 );
 const latoBoldItalic = changeFontFamily(
-    font(
+    fetchFont(
         'https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Lato:ital,wght@0,700;1,700&display=swap',
     ).toString(),
     'Lato Bold Italic',
 );
 
 const latoHairline = changeFontFamily(
-    font('https://fonts.googleapis.com/css2?family=Lato:wght@100&display=swap').toString(),
+    fetchFont('https://fonts.googleapis.com/css2?family=Lato:wght@100&display=swap').toString(),
     'Lato Hairline',
 );
 const latoHairlineItalic = changeFontFamily(
-    font(
+    fetchFont(
         'https://fonts.googleapis.com/css2?family=Lato:wght@100&family=Lato:ital,wght@0,100;1,100&display=swap',
     ).toString(),
     'Lato Hairline Italic',
 );
 
 const latoLight = changeFontFamily(
-    font('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap').toString(),
+    fetchFont('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap').toString(),
     'Lato Light',
 );
 const latoLightItalic = changeFontFamily(
-    font(
+    fetchFont(
         'https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Lato:ital,wght@0,300;1,300&display=swap',
     ).toString(),
     'Lato Light Italic',
 );
 
 const lato = changeFontFamily(
-    font('https://fonts.googleapis.com/css2?family=Lato:wght@400&display=swap').toString(),
+    fetchFont('https://fonts.googleapis.com/css2?family=Lato:wght@400&display=swap').toString(),
     'Lato',
 );
 const latoItalic = changeFontFamily(
-    font(
+    fetchFont(
         'https://fonts.googleapis.com/css2?family=Lato:wght@400&family=Lato:ital,wght@0,400;1,400&display=swap',
     ).toString(),
     'Lato Italic',

From 0d849c7dfadccdc5a473fb937b47e528d7312ac2 Mon Sep 17 00:00:00 2001
From: Adrian Estevez <adrianestevez@Adrians-MacBook-Pro.local>
Date: Sat, 17 Dec 2022 13:38:52 -0500
Subject: [PATCH 3/3] fix: change font family request in rainbow legacy styles

---
 .../Application/rainbowLegacyStyles.js        | 163 +++++++++---------
 1 file changed, 85 insertions(+), 78 deletions(-)

diff --git a/src/components/Application/rainbowLegacyStyles.js b/src/components/Application/rainbowLegacyStyles.js
index a45c4ccc5..08a42be81 100644
--- a/src/components/Application/rainbowLegacyStyles.js
+++ b/src/components/Application/rainbowLegacyStyles.js
@@ -2,94 +2,101 @@ import React from 'react';
 import { createGlobalStyle } from 'styled-components';
 import { isServer } from '../../libs/utils';
 
-const fetchFont = url => {
-    const xhr = new XMLHttpRequest();
-    xhr.open('GET', url, false);
-    xhr.send();
-    return xhr.responseText;
-};
-
-const changeFontFamily = (fontFace, newName) => {
-    const newFontFace = fontFace.replace(/Lato/g, newName);
-    return newFontFace;
-};
-
-const latoBlack = changeFontFamily(
-    fetchFont('https://fonts.googleapis.com/css2?family=Lato:wght@900&display=swap').toString(),
-    'Lato Black',
-);
-const latoBlackItalic = changeFontFamily(
-    fetchFont(
-        'https://fonts.googleapis.com/css2?family=Lato:wght@900&family=Lato:ital,wght@0,900;1,900&display=swap',
-    ).toString(),
-    'Lato Black Italic',
-);
+const legacyStyles = `
+  @font-face {
+    font-family: 'Lato Black';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/lato/v23/S6u9w4BMUTPHh6UVSwaPGQ3q5d0N7w.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
 
-const latoBold = changeFontFamily(
-    fetchFont('https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap').toString(),
-    'Lato Bold',
-);
-const latoBoldItalic = changeFontFamily(
-    fetchFont(
-        'https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Lato:ital,wght@0,700;1,700&display=swap',
-    ).toString(),
-    'Lato Bold Italic',
-);
+  @font-face {
+    font-family: 'Lato Black Italic';
+    font-style: italic;
+    font-weight: 900;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/lato/v23/S6u_w4BMUTPHjxsI3wi_Gwftx9897g.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
 
-const latoHairline = changeFontFamily(
-    fetchFont('https://fonts.googleapis.com/css2?family=Lato:wght@100&display=swap').toString(),
-    'Lato Hairline',
-);
-const latoHairlineItalic = changeFontFamily(
-    fetchFont(
-        'https://fonts.googleapis.com/css2?family=Lato:wght@100&family=Lato:ital,wght@0,100;1,100&display=swap',
-    ).toString(),
-    'Lato Hairline Italic',
-);
+  @font-face {
+    font-family: 'Lato Bold';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/lato/v23/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;    
+  }
 
-const latoLight = changeFontFamily(
-    fetchFont('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap').toString(),
-    'Lato Light',
-);
-const latoLightItalic = changeFontFamily(
-    fetchFont(
-        'https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Lato:ital,wght@0,300;1,300&display=swap',
-    ).toString(),
-    'Lato Light Italic',
-);
+  @font-face {
+    font-family: 'Lato Bold Italic';
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/lato/v23/S6u_w4BMUTPHjxsI5wq_Gwftx9897g.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
 
-const lato = changeFontFamily(
-    fetchFont('https://fonts.googleapis.com/css2?family=Lato:wght@400&display=swap').toString(),
-    'Lato',
-);
-const latoItalic = changeFontFamily(
-    fetchFont(
-        'https://fonts.googleapis.com/css2?family=Lato:wght@400&family=Lato:ital,wght@0,400;1,400&display=swap',
-    ).toString(),
-    'Lato Italic',
-);
+  @font-face {
+    font-family: 'Lato Hairline';
+    font-style: normal;
+    font-weight: 100;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/lato/v23/S6u8w4BMUTPHh30AXC-qNiXg7Q.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
 
-const legacyStyles = `
+  @font-face {
+    font-family: 'Lato Hairline Italic';
+    font-style: italic;
+    font-weight: 100;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/lato/v23/S6u-w4BMUTPHjxsIPx-oPCLC79U1.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
 
-  ${latoBlack}
-  ${latoBlackItalic}
-  
-  ${latoBold}
-  ${latoBoldItalic}
+  @font-face {
+    font-family: 'Lato Italic';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/lato/v23/S6u8w4BMUTPHjxsAXC-qNiXg7Q.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
 
-  ${latoHairline}
-  ${latoHairlineItalic}
+  @font-face {
+    font-family: 'Lato Light';
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/lato/v23/S6u9w4BMUTPHh7USSwiPGQ3q5d0.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
 
-  ${latoLight}
-  ${latoLightItalic}
+  @font-face {
+    font-family: 'Lato Light Italic';
+    font-style: italic;
+    font-weight: 300;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/lato/v23/S6u_w4BMUTPHjxsI9w2_Gwftx9897g.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
 
-  ${lato}
-  ${latoItalic}
+  @font-face {
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/lato/v23/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
 
-  html {
-    font-family: 'Lato', Arial, sans-serif;
-    font-size: 100%;
-    line-height: 1.5;
+    html {
+      font-family: 'Lato', Arial, sans-serif;
+      font-size: 100%;
+      line-height: 1.5;
     background: #fafaf9;
     color: #3e3e3c;
     -ms-text-size-adjust: 100%;