diff --git a/package.json b/package.json index 8af1d4b3a..2e5842322 100644 --- a/package.json +++ b/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": [ diff --git a/scripts/export-scss.js b/scripts/export-scss.js index fa1170347..965fb585f 100644 --- a/scripts/export-scss.js +++ b/scripts/export-scss.js @@ -64,7 +64,7 @@ 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 }) => { @@ -72,16 +72,20 @@ const filesToWrite = families 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 } ]; diff --git a/scripts/tools/index.js b/scripts/tools/index.js index 155fadfe0..fca08a28a 100644 --- a/scripts/tools/index.js +++ b/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} } `; };