feat: Refactor dynamicFontInjector to handle font loading errors with…

… fallback to Roboto

- Added try-catch block for robust error handling during font injection
- Implemented onerror event for font link element to handle loading failures
- Introduced fallback mechanism to apply 'Roboto' font if the requested font fails to load
- Ensured fallback applies if #calendar-widget is not found in the DOM
- Removed all font inherits and replaced with dynamically added css font variable

src/App.css

@@ -1,6 +1,5 @@
 #calendar-widget {
   height: 100%;
-  font-family: Roboto;
 }
 
 #calendar-widget .loader-wrapper {

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

@@ -23,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,19 +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);
+    fontLink.onerror = () => {
+      console.error(`Failed to load the font: ${fontName}. Falling back to ${fallbackFont}.`);
+      setFallbackFont();
+    };
 
-  const calendarWidget = document.getElementById('calendar-widget');
-  if (calendarWidget) {
-    calendarWidget.style.fontFamily = `'${fontName}', sans-serif`;
+    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`);
+    }
+  };
 };