fix(css): reference complete woff file, do not reference split woff f…

…iles (#160)

* fix(css): reference complete woff file, do not reference split woff files

* chore(scripts): unnecessary default object property

* chore(package): bump version number to v1.0.2

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ibm/plex",
   "description": "The package of IBM’s typeface, IBM Plex",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "repository": "https://github.com/ibm/plex.git",
   "license": "OFL-1.1",
   "keywords": [

scripts/export-scss.js

@@ -64,24 +64,28 @@ const filesToWrite = families
           Latin2: 4,
           Latin1: 5
         };
-        const content = innerFiles
+        const contentSplit = innerFiles
           .sort((a, b) => order[a.unicode.type] - order[b.unicode.type])
           .filter(({ unicode }) => family.unicodes.includes(unicode.type))
           .map(({ unicode }) => {
             const importPath = formatFilename([unicode.type]);
             return `@import '${importPath}';`;
           })
           .join("\n");
+        const contentWhole = createFontFace(filename, family, weight);
 
         // We spread all the inner files, since they are valid files that we'll
         // want to create in the future, and then reduce over the whole
         // collection to flatten the array entries.
+        // String contentWhole (woff) goes before contentSplit (woff2) so modern
+        // browsers will look for split files.
         return [
           ...innerFiles,
           {
             filename: `${OUTPUT_DIRECTORY}/${filename.replace(" ", "-")}`,
             content: `$font-prefix: '..' !default;
-${content}`,
+${contentWhole}
+${contentSplit}`,
             weight
           }
         ];

scripts/tools/index.js

@@ -16,7 +16,7 @@ exports.formatFilename = formatFilename;
  * `createFontFace` is used to generate the actual `@font-face` declarations
  * that get written to the appropriate files.
  */
-const createFontFace = (filename, family, weight, unicode) => {
+const createFontFace = (filename, family, weight, unicode = {}) => {
   const fontFileName = [
     `IBMPlex${family.type.replace(" ", "")}`,
     weight.variant ? weight.type + weight.variant : weight.type,
@@ -39,20 +39,26 @@ const createFontFace = (filename, family, weight, unicode) => {
     .filter(Boolean)
     .join("");
 
+  const local = `local('${localFileName}'),
+    local('${localPostscriptName}')`;
+
   const urls = {
-    woff2: `#{$font-prefix}/IBM-Plex-${family.type.replace(" ", "-")}/fonts/split/woff2/${fontFileName}.woff2`,
-    woff: `#{$font-prefix}/IBM-Plex-${family.type.replace(" ", "-")}/fonts/split/woff/${fontFileName}.woff`
+    woff: `#{$font-prefix}/IBM-Plex-${family.type.replace(" ", "-")}/fonts/complete/woff/${fontFileName}.woff`,
+    woff2: `#{$font-prefix}/IBM-Plex-${family.type.replace(" ", "-")}/fonts/split/woff2/${fontFileName}.woff2`
   };
 
+  const src = unicode.characters
+    ? `src: ${local},
+    url('${urls.woff2}') format('woff2');
+    unicode-range: ${unicode.characters.join(", ")};` 
+    : `src: ${local},
+    url('${urls.woff}') format('woff');`
+
   return `@font-face {
   font-family: '${family.name}';
   font-style: ${weight.properties.fontStyle};
   font-weight: ${weight.properties.fontWeight};
-  src: local('${localFileName}'),
-    local('${localPostscriptName}'),
-    url('${urls.woff2}') format('woff2'),
-    url('${urls.woff}') format('woff');
-  unicode-range: '${unicode.characters.join(", ")}';
+  ${src}
 }
 `;
 };