fix: updated font style to only affect calendar widget and its children

src/App.js

@@ -8,30 +8,32 @@ import { dynamicCssColorInjector, dynamicFontInjector } from './utils/dynamicSty
 import { useEffect, useState } from 'react';
 import dayjs from 'dayjs';
 import Loader from './components/loader/Loader';
+require('dayjs/locale/en');
+require('dayjs/locale/fr');
 
 function App(props) {
   const { color, font, ...widgetProps } = props;
   const locale = widgetProps.locale;
   const [loading, setLoading] = useState(true);
 
-  const palette = getColors(color);
-  dynamicCssColorInjector(palette);
-
   useEffect(() => {
-    async function loadLocale() {
-      try {
-        await import(`dayjs/locale/${locale}.js`);
-        dayjs.locale(widgetProps.locale);
-      } catch (error) {
-        console.error(`Failed to load locale: ${locale}`, error);
-      } finally {
-        setLoading(false);
+    try {
+      if (locale) {
+        dayjs.locale(locale);
+      } else {
+        dayjs.locale('en');
       }
+      setLoading(false);
+    } catch (error) {
+      console.error(`Failed to set locale: ${locale}`, error);
+      dayjs.locale('en');
+      setLoading(false);
     }
-
-    loadLocale();
   }, [locale]);
 
+  const palette = getColors(color);
+  dynamicCssColorInjector(palette);
+
   useEffect(() => {
     dynamicFontInjector(font);
   }, [font]);

src/components/customCalendar/customCalendar.css

@@ -129,7 +129,7 @@
 }
 
 #calendar-widget > .widget-layout .react-calendar-wrapper * {
-  font-family: inherit !important;
+  font-family: var(--calendar-font-family) !important;
 }
 
 @media screen and (max-width: 820px) {

src/components/search/search.css

@@ -5,7 +5,7 @@
   border-radius: 68px;
   border: 1px solid #b6c1c9;
   flex: 1;
-  font-family: inherit !important;
+  font-family: var(--calendar-font-family) !important;
   font-size: 16px;
   font-weight: 400;
   line-height: 24px;

src/index.css

@@ -5,11 +5,9 @@ html {
 body {
   margin: 0;
   padding: 0;
-  font-family: Roboto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   max-width: 100vw !important;
-  /* max-height: 100vh; */
   height: 100%;
 }
 
@@ -25,18 +23,24 @@ body {
   --primary-black: #222732;
 }
 
-ul,
-li,
-p {
+#calendar-widget ul,
+#calendar-widget li,
+#calendar-widget p {
   all: unset;
   display: block;
 }
 
-button {
-  font-family: inherit;
+#calendar-widget button,
+#calendar-widget ul,
+#calendar-widget li,
+#calendar-widget p,
+#calendar-widget span,
+#calendar-widget input,
+#calendar-widget div {
+  font-family: var(--calendar-font-family);
 }
 
-* :focus-visible {
+#calendar-widget * :focus-visible {
   outline: none;
 }
 

src/utils/dynamicStylePropertyInjector.js

@@ -13,15 +13,42 @@ export const dynamicCssColorInjector = (palette) => {
 };
 
 export const dynamicFontInjector = (fontName) => {
-  if (fontName === 'Roboto') return;
+  const fallbackFont = 'Roboto';
 
-  const fontLink = document.createElement('link');
-  fontLink.rel = 'stylesheet';
-  fontLink.href = `https://fonts.googleapis.com/css2?family=${fontName.replace(
-    /\s+/g,
-    '+',
-  )}&display=swap`;
+  try {
+    // Inject Google Fonts link
+    const fontLink = document.createElement('link');
+    fontLink.rel = 'stylesheet';
+    fontLink.href = `https://fonts.googleapis.com/css2?family=${fontName.replace(
+      /\s+/g,
+      '+',
+    )}&display=swap`;
 
-  document.head.appendChild(fontLink);
-  document.body.style.fontFamily = `'${fontName}', sans-serif`;
+    fontLink.onerror = () => {
+      console.error(`Failed to load the font: ${fontName}. Falling back to ${fallbackFont}.`);
+      setFallbackFont();
+    };
+
+    document.head.appendChild(fontLink);
+
+    // Apply the font to the #calendar-widget as a CSS variable
+    const calendarWidget = document.getElementById('calendar-widget');
+    if (calendarWidget) {
+      calendarWidget.style.setProperty('--calendar-font-family', `'${fontName}', sans-serif`);
+    } else {
+      console.error('Calendar widget not found.');
+      setFallbackFont();
+    }
+  } catch (error) {
+    console.error('Error during font injection:', error);
+    setFallbackFont();
+  }
+
+  // Function to apply fallback font
+  const setFallbackFont = () => {
+    const calendarWidget = document.getElementById('calendar-widget');
+    if (calendarWidget) {
+      calendarWidget.style.setProperty('--calendar-font-family', `'${fallbackFont}', sans-serif`);
+    }
+  };
 };