use fontsource

package.json

@@ -42,6 +42,7 @@
   },
   "license": "GPL-2.0-only",
   "devDependencies": {
+    "@fontsource/open-sans": "^4.5.14",
     "@types/sortablejs": "^1.15.0",
     "@vitejs/plugin-react": "^3.1.0",
     "color": "^3.1.0",

src/fonts.css

@@ -1,80 +0,0 @@
-/* open-sans-300 */
-@font-face {
-  font-family: 'Open Sans SemiCondensed';
-  font-style: normal;
-  font-weight: 300;
-  src: local('Open Sans SemiCondensed Light'), local('OpenSans-SemiCondensedLight'),
-       url('./fonts/opensans-sc300light.woff2') format('woff2'); /* Chrome 26+, Opera 23+, Firefox 39+ */
-}
-/* open-sans-300italic */
-@font-face {
-  font-family: 'Open Sans SemiCondensed';
-  font-style: italic;
-  font-weight: 300;
-  src: local('Open Sans SemiCondensed Light Italic'), local('OpenSans-SemiCondensedLightItalic'),
-       url('./fonts/opensans-sc300lightitalic.woff2') format('woff2'); /* Chrome 26+, Opera 23+, Firefox 39+ */
-}
-/* open-sans-regular */
-@font-face {
-  font-family: 'Open Sans SemiCondensed';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Open Sans SemiCondensed'), local('OpenSans-SemiCondensed'),
-       url('./fonts/opensans-sc400regular.woff2') format('woff2'); /* Chrome 26+, Opera 23+, Firefox 39+ */
-}
-/* open-sans-italic */
-@font-face {
-  font-family: 'Open Sans SemiCondensed';
-  font-style: italic;
-  font-weight: 400;
-  src: local('Open Sans SemiCondensed Italic'), local('OpenSans-SemiCondensedItalic'),
-       url('./fonts/opensans-sc400regularitalic.woff2') format('woff2'); /* Chrome 26+, Opera 23+, Firefox 39+ */
-}
-/* open-sans-600 */
-@font-face {
-  font-family: 'Open Sans SemiCondensed';
-  font-style: normal;
-  font-weight: 600;
-  src: local('Open Sans SemiCondensed SemiBold'), local('OpenSans-SemiCondensedSemiBold'),
-       url('./fonts/opensans-sc600semibold.woff2') format('woff2'); /* Chrome 26+, Opera 23+, Firefox 39+ */
-}
-/* open-sans-600italic */
-@font-face {
-  font-family: 'Open Sans SemiCondensed';
-  font-style: italic;
-  font-weight: 600;
-  src: local('Open Sans SemiCondensed SemiBold Italic'), local('OpenSans-SemiCondensedSemiBoldItalic'),
-       url('./fonts/opensans-sc600semibolditalic.woff2') format('woff2'); /* Chrome 26+, Opera 23+, Firefox 39+ */
-}
-/* open-sans-700 */
-@font-face {
-  font-family: 'Open Sans SemiCondensed';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Open Sans SemiCondensed Bold'), local('OpenSans-SemiCondensedBold'),
-       url('./fonts/opensans-sc700bold.woff2') format('woff2'); /* Chrome 26+, Opera 23+, Firefox 39+ */
-}
-/* open-sans-700italic */
-@font-face {
-  font-family: 'Open Sans SemiCondensed';
-  font-style: italic;
-  font-weight: 700;
-  src: local('Open Sans SemiCondensed Bold Italic'), local('OpenSans-SemiCondensedBoldItalic'),
-       url('./fonts/opensans-sc700bolditalic.woff2') format('woff2'); /* Chrome 26+, Opera 23+, Firefox 39+ */
-}
-/* open-sans-800 */
-@font-face {
-  font-family: 'Open Sans SemiCondensed';
-  font-style: normal;
-  font-weight: 800;
-  src: local('Open Sans SemiCondensed ExtraBold'), local('OpenSans-SemiCondensedExtraBold'),
-       url('./fonts/opensans-sc800extrabold.woff2') format('woff2'); /* Chrome 26+, Opera 23+, Firefox 39+ */
-}
-/* open-sans-800italic */
-@font-face {
-  font-family: 'Open Sans SemiCondensed';
-  font-style: italic;
-  font-weight: 800;
-  src: local('Open Sans SemiCondensed ExtraBold Italic'), local('OpenSans-SemiCondensedExtraBoldItalic'),
-       url('./fonts/opensans-sc800extrabolditalic.woff2') format('woff2'); /* Chrome 26+, Opera 23+, Firefox 39+ */
-}

src/index.jsx

@@ -4,11 +4,23 @@ import { MotionConfig } from 'framer-motion';
 
 import 'sweetalert2/dist/sweetalert2.css';
 
+import '@fontsource/open-sans/300.css';
+import '@fontsource/open-sans/300-italic.css';
+import '@fontsource/open-sans/400.css';
+import '@fontsource/open-sans/400-italic.css';
+import '@fontsource/open-sans/500.css';
+import '@fontsource/open-sans/500-italic.css';
+import '@fontsource/open-sans/600.css';
+import '@fontsource/open-sans/600-italic.css';
+import '@fontsource/open-sans/700.css';
+import '@fontsource/open-sans/700-italic.css';
+import '@fontsource/open-sans/800.css';
+import '@fontsource/open-sans/800-italic.css';
+
 import App from './App';
 import ErrorBoundary from './ErrorBoundary';
 import './i18n';
 
-import './fonts.css';
 import './main.css';
 
 

src/main.css

@@ -1,5 +1,5 @@
 html {
-  font-family: 'Open Sans SemiCondensed', 'Noto Sans SemiCondensed', 'Noto Sans', sans-serif;
+  font-family: 'Open Sans', 'Noto Sans SemiCondensed', 'Noto Sans', sans-serif;
   font-size: 16px;
 }
 

yarn.lock

@@ -782,6 +782,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@fontsource/open-sans@npm:^4.5.14":
+  version: 4.5.14
+  resolution: "@fontsource/open-sans@npm:4.5.14"
+  checksum: 72059637d20d91520538364ead685854a4adca1d630c763e7a37438e9680e43477d0d81105fd96bc9a67a34c6703d2c58b1c187f6a26ccabf30dfd903abdfc6a
+  languageName: node
+  linkType: hard
+
 "@gar/promisify@npm:^1.1.3":
   version: 1.1.3
   resolution: "@gar/promisify@npm:1.1.3"
@@ -6022,6 +6029,7 @@ __metadata:
   resolution: "lossless-cut@workspace:."
   dependencies:
     "@electron/remote": ^2.0.9
+    "@fontsource/open-sans": ^4.5.14
     "@types/sortablejs": ^1.15.0
     "@vitejs/plugin-react": ^3.1.0
     color: ^3.1.0