fix: font not loading on safari and update yarn.lock (#23)

* chore: update yarn.lock * fix: fontfaceobserver error on safari * fix: title font size on landing page
defi-wonderland · Feb 15, 2023 · eeb10aa · eeb10aa
1 parent ad9b742
commit eeb10aa
Show file tree

Hide file tree

Showing 4 changed files with 7,269 additions and 7,386 deletions.
diff --git a/src/assets/themes/dark/_fonts.css b/src/assets/themes/dark/_fonts.css
@@ -13,7 +13,7 @@
     url(/src/assets/themes/dark/fonts/SharpGrotesk-LightItalic10.otf)
       format("opentype");
   font-weight: 300;
-  font-style: italic;
+  font-style: normal;
   font-stretch: normal;
 }
 

diff --git a/src/hooks/useFontObserver.tsx b/src/hooks/useFontObserver.tsx
@@ -11,9 +11,10 @@ export function useFontObserver() {
   });
 
   useEffect(() => {
-    document.fonts.ready.then(() => {
-      setReady(true);
-    });
+    if (fontLoaded)
+      document.fonts.ready.then(() => {
+        setReady(true);
+      });
   }, [fontLoaded]);
 
   return { ready };

diff --git a/src/pages/Landing/HeroSection/index.tsx b/src/pages/Landing/HeroSection/index.tsx
@@ -21,7 +21,7 @@ export const HeroSection: FC<HeroSectionProps> = ({ ...props }) => {
     <StyledHeroSection full backgroundImage="/img/hero/hero-bg.jpg" {...props}>
       <LiquidDistortion
         text="TO HELP THE WEB3 ECOSYSTEM THRIVE"
-        fontSize={isMobile ? 50 : 100}
+        fontSize={isMobile ? 50 : 140}
       />
       <HeroDivider src="/img/hero/hero-bg-divider.png" />
     </StyledHeroSection>