fix: set lato as the default font and use montserrat for headers

https://app.clickup.com/t/86b2pt9td

packages/ui-react/src/styles/_theme.scss

@@ -1,6 +1,6 @@
 @use 'variables';
 
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
 
 // Colors
 
@@ -15,8 +15,8 @@ $body-color: variables.$white !default;
 
 // Typography
 
-$body-font-family: Montserrat, Helvetica, Arial, sans-serif !default;
-$body-alt-font-family: Montserrat, Helvetica, Arial, sans-serif !default;
+$body-font-family: Lato, Helvetica, Arial, sans-serif !default;
+$body-alt-font-family: Lato, Helvetica, Arial, sans-serif !default;
 
 $body-font-weight-regular: 500 !default;
 $body-font-weight-bold: 700 !default;
@@ -115,3 +115,7 @@ $epg-title-color: variables.$white;
 $epg-title-selected-color: variables.$black;
 $epg-text-color: rgba(variables.$white, 0.7) !default;
 $epg-text-selected-color: rgba(variables.$black, 0.7) !default;
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: Montserrat, Helvetica, Arial, sans-serif !important;
+}