Import @fontsource CSS in JS

2 files changed, 3 insertions, 32 deletions

diff --git a/src/components/Root.css b/src/components/Root.css
index cd85047..83d4171 100644
--- a/src/components/Root.css
+++ b/src/components/Root.css
@@ -1,35 +1,3 @@
-/* roboto-mono-latin-400-normal*/
-@font-face {
-  font-family: 'Roboto Mono';
-  font-style: normal;
-  font-display: swap;
-  font-weight: 400;
-  src: url('../../node_modules/fontsource-roboto-mono/files/roboto-mono-latin-400-normal.woff2')
-    format('woff2');
-}
-
-/* cat node_modules/fontsource-open-sans/latin-400-normal.css */
-@font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-display: swap;
-  font-weight: 400;
-  src: local('Open Sans Regular'), local('OpenSans-Regular'),
-    url('../../node_modules/fontsource-open-sans/files/open-sans-latin-400-normal.woff2')
-      format('woff2');
-}
-
-/* cat node_modules/fontsource-open-sans/latin-700-normal.css */
-@font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-display: swap;
-  font-weight: 700;
-  src: local('Open Sans Bold'), local('OpenSans-Bold'),
-    url('../../node_modules/fontsource-open-sans/files/open-sans-latin-700-normal.woff2')
-      format('woff2');
-}
-
 .relative {
   position: relative;
 }
diff --git a/src/components/Root.tsx b/src/components/Root.tsx
index 489d39a..7046156 100644
--- a/src/components/Root.tsx
+++ b/src/components/Root.tsx
@@ -1,4 +1,7 @@
 import './Root.css';
+import '@fontsource/roboto-mono/latin-400.css';
+import '@fontsource/open-sans/latin-400.css';
+import '@fontsource/open-sans/latin-700.css';
 
 import React, { lazy, Suspense } from 'react';
 import { QueryClientProvider } from 'react-query';