feat(fonts): add licensed ms_sans_serif font

Author: arturbien

.storybook/decorators/globalStyle.js

@@ -2,25 +2,26 @@ import React from 'react';
 import { createGlobalStyle } from 'styled-components';
 
 import styleReset from '../../src/common/styleReset';
-import MSSansSerif from '../../src/assets/fonts/MS-Sans-Serif.woff2';
-import MSSansSerifBold from '../../src/assets/fonts/MS-Sans-Serif-Bold.woff2';
+// TODO is there a way to keep import paths consistent with what end user will get?
+import ms_sans_serif from '../../src/assets/fonts/dist/ms_sans_serif.woff2';
+import ms_sans_serif_bold from '../../src/assets/fonts/dist/ms_sans_serif_bold.woff2';
 
 const GlobalStyle = createGlobalStyle`
   ${styleReset}
   @font-face {
-    font-family: 'MS-Sans-Serif';
-    src: url('${MSSansSerif}') format('woff2');
+    font-family: 'ms_sans_serif';
+    src: url('${ms_sans_serif}') format('woff2');
     font-weight: 400;
     font-style: normal
   }
   @font-face {
-    font-family: 'MS-Sans-Serif';
-    src: url('${MSSansSerifBold}') format("woff2");
+    font-family: 'ms_sans_serif';
+    src: url('${ms_sans_serif_bold}') format("woff2");
     font-weight: bold;
     font-style: normal
   }
   body {
-    font-family: 'MS-Sans-Serif', 'sans-serif';
+    font-family: 'ms_sans_serif', 'sans-serif';
   }
 `;
 

README.md

@@ -49,25 +49,24 @@ import { styleReset, List, ListItem, Divider } from 'react95';
 // pick a theme of your choice
 import original from "react95/dist/themes/original";
 // original Windows95 font (optionally)
-import MSSansSerif from "react95/dist/fonts/MS-Sans-Serif.woff2";
-import MSSansSerifBold from "react95/dist/fonts/MS-Sans-Serif-Bold.woff2";
-
+import ms_sans_serif from "react95/dist/fonts/ms_sans_serif.woff2";
+import ms_sans_serif_bold from "react95/dist/fonts/ms_sans_serif_bold.woff2";
 
 const GlobalStyles = createGlobalStyle`
   @font-face {
-    font-family: 'MS-Sans-Serif';
-    src: url('${MSSansSerif}') format('woff2');
+    font-family: 'ms_sans_serif';
+    src: url('${ms_sans_serif}') format('woff2');
     font-weight: 400;
     font-style: normal
   }
   @font-face {
-    font-family: 'MS-Sans-Serif';
-    src: url('${MSSansSerifBold}') format("woff2");
+    font-family: 'ms_sans_serif';
+    src: url('${ms_sans_serif_bold}') format('woff2');
     font-weight: bold;
     font-style: normal
   }
   body {
-    font-family: "MS-Sans-Serif";
+    font-family: 'ms_sans_serif';
   }
   ${styleReset}
 `;

docs/usage.mdx

@@ -16,24 +16,24 @@ import { styleReset, List, ListItem, Divider } from 'react95';
 // pick a theme of your choice
 import original from "react95/dist/themes/original";
 // original Windows95 font (optionally)
-import MSSansSerif from "react95/dist/fonts/MS-Sans-Serif.woff2";
-import MSSansSerifBold from "react95/dist/fonts/MS-Sans-Serif-Bold.woff2";
+import ms_sans_serif from "react95/dist/fonts/ms_sans_serif.woff2";
+import ms_sans_serif_bold from "react95/dist/fonts/ms_sans_serif_bold.woff2";
 
 const GlobalStyles = createGlobalStyle`
   @font-face {
-    font-family: 'MS-Sans-Serif';
-    src: url('${MSSansSerif}') format('woff2');
+    font-family: 'ms_sans_serif';
+    src: url('${ms_sans_serif}') format('woff2');
     font-weight: 400;
     font-style: normal
   }
   @font-face {
-    font-family: 'MS-Sans-Serif';
-    src: url('${MSSansSerifBold}') format("woff2");
+    font-family: 'ms_sans_serif';
+    src: url('${ms_sans_serif_bold}') format('woff2');
     font-weight: bold;
     font-style: normal
   }
   body {
-    font-family: "MS-Sans-Serif";
+    font-family: 'ms_sans_serif';
   }
   ${styleReset}
 `;

rollup.config.js

@@ -44,7 +44,10 @@ export default [
     preserveModules: true,
     plugins: [
       copy({
-        targets: [{ src: './src/assets/*', dest: './dist/' }]
+        targets: [
+          { src: './src/assets/fonts/dist/*', dest: './dist/fonts' },
+          { src: './src/assets/images/*', dest: './dist/images' }
+        ]
       }),
       replace({
         'process.env.NODE_ENV': JSON.stringify(NODE_ENV)