Merge pull request #1957 from dxc-technology/jialecl-fontsWorkaround

fonts css reverted back and changed the approach to load fonts

Author: GomezIvann

lib/.storybook/preview.tsx

@@ -3,7 +3,6 @@ import styled from "styled-components";
 import type { Preview } from "@storybook/react";
 import React from "react";
 import { disabledRules } from "../test/accessibility/rules/common/disabledRules";
-import "../src/common/fonts.css";
 
 const preview: Preview = {
   parameters: {
@@ -33,6 +32,7 @@ const preview: Preview = {
 };
 
 const Container = styled.div`
+  @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1");
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
     "Droid Sans", "Helvetica Neue", sans-serif;
 `;

lib/src/HalstackContext.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo } from "react";
 import Color from "color";
+import { createGlobalStyle } from "styled-components";
 import {
   AdvancedTheme,
   OpinionatedTheme,
@@ -384,10 +385,15 @@ const HalstackProvider = ({ theme, advancedTheme, labels, children }: HalstackPr
 
   return (
     <HalstackContext.Provider value={parsedTheme}>
+      <GlobalStyle />
       <HalstackLanguageContext.Provider value={parsedLabels}>{children}</HalstackLanguageContext.Provider>
     </HalstackContext.Provider>
   );
 };
 
+const GlobalStyle = createGlobalStyle`
+  @import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap");
+`;
+
 export default HalstackContext;
 export { HalstackProvider, HalstackLanguageContext };

lib/src/common/fonts.css

@@ -16,6 +16,7 @@ const IconContainer = styled.span<{
   icon: string;
   filled: boolean;
 }>`
+  @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1");
   font-family: "Material Symbols Outlined";
   font-weight: normal;
   font-style: normal;

lib/src/icon/Icon.tsx

@@ -1,4 +1,3 @@
-import "./common/fonts.css";
 import DxcAlert from "./alert/Alert";
 import DxcAccordion from "./accordion/Accordion";
 import DxcButton from "./button/Button";