diff --git a/scripts/create-package-from-google-font-id.js b/scripts/create-package-from-google-font-id.js index d9901858b..3718ecd23 100644 --- a/scripts/create-package-from-google-font-id.js +++ b/scripts/create-package-from-google-font-id.js @@ -13,7 +13,7 @@ const { packageJson, fontFace, readme } = require(`./templates`) const download = require(`./download-file`) const commonWeightNameMap = require(`./common-weight-name-map`) -//const baseurl = `https://google-webfonts-helper.herokuapp.com/api/fonts/` +// const baseurl = `https://google-webfonts-helper.herokuapp.com/api/fonts/` const baseurl = `http://localhost:9000/api/fonts/` const id = process.argv[2] if (!id) { @@ -27,9 +27,18 @@ const dirs = p => const packagesCount = dirs(`./packages`).length const res = requestSync(`GET`, baseurl + id) -const typeface = JSON.parse(res.getBody(`UTF-8`)) +const defSubsetTypeface = JSON.parse(res.getBody(`UTF-8`)) +const subsetsWithoutDefault = defSubsetTypeface.subsets.filter((subset) => subset !== defSubsetTypeface.defSubset) -const typefaceDir = `packages/${typeface.id}` +const subsets = [[ + defSubsetTypeface.defSubset, + defSubsetTypeface +]].concat(subsetsWithoutDefault.map((subset) => { + const subsetRes = requestSync(`GET`, baseurl + id + '?subsets=' + defSubsetTypeface.defSubset + ',' + subset) + return [subset, JSON.parse(subsetRes.getBody(`UTF-8`))] +})) + +const typefaceDir = `packages/${defSubsetTypeface.id}` // Create the directories for this typeface. fs.ensureDirSync(typefaceDir) @@ -40,42 +49,50 @@ fs.writeFileSync(typefaceDir + `/.gitignore`, "/files") fs.writeFileSync(typefaceDir + `/.npmignore`, "") fs.writeFileSync(typefaceDir + `/files/.gitignore`, "") -const makeFontFilePath = (item, extension) => { +const makeFontFilePath = (item, subset, extension) => { let style = "" if (item.fontStyle !== `normal`) { style = item.fontStyle } - return `./files/${typeface.id}-${typeface.defSubset}-${item.fontWeight}${style}.${extension}` + return `./files/${defSubsetTypeface.id}-${subset}-${item.fontWeight}${style ? '-' + style : ''}.${extension}` } -// Download all font files. async.map( - typeface.variants, - (item, callback) => { - // Download woff, and woff2 in parallal. - const downloads = [`woff`, `woff2`].map(extension => { - const dest = path.join(typefaceDir, makeFontFilePath(item, extension)) - const url = item[extension] - return { - extension, - url, - dest, - } - }) - item.errored = false + subsets, + ([subset, typeface], callback) => { + // Download all font files. async.map( - downloads, - (d, downloadDone) => { - const { url, dest, extension } = d - download(url, dest, err => { - if (err) { - console.log("error downloading", typeface.id, url, err) - // Track if a download errored. - item.errored = true + typeface.variants, + (item, callback) => { + // Download woff, and woff2 in parallal. + const downloads = [`woff`, `woff2`].map(extension => { + const dest = path.join(typefaceDir, makeFontFilePath(item, subset, extension)) + const url = item[extension] + return { + extension, + url, + dest, + subset, } - // log(`Finished downloading "${url}" to "${dest}"`) - downloadDone() }) + + item.errored = false + async.map( + downloads, + (d, downloadDone) => { + const { url, dest, extension, subset } = d + download(url, dest, err => { + if (err) { + console.log("error downloading", typeface.id, url, err) + // Track if a download errored. + item.errored = true + } + // log(`Finished downloading "${url}" to "${dest}"`) + downloadDone() + }) + }, + callback + ) }, callback ) @@ -111,8 +128,8 @@ async.map( // Write out the README.md const packageReadme = readme({ - typefaceId: typeface.id, - typefaceName: typeface.family, + typefaceId: defSubsetTypeface.id, + typefaceName: defSubsetTypeface.family, count: packagesCount, }) @@ -120,43 +137,54 @@ async.map( // Write out package.json file const packageJSON = packageJson({ - typefaceId: typeface.id, - typefaceName: typeface.family, + typefaceId: defSubsetTypeface.id, + typefaceName: defSubsetTypeface.family, }) fs.writeFileSync(`${typefaceDir}/package.json`, packageJSON) // Write out index.css file - const variants = _.sortBy(typeface.variants, item => { + const variants = _.sortBy(defSubsetTypeface.variants, item => { let sortString = item.fontWeight if (item.fontStyle === `italic`) { sortString += item.fontStyle } return sortString }) - css = variants.map(item => { - if (item.errored) { - return false - } - let style = "" - if (item.fontStyle !== `normal`) { - style = item.fontStyle - } - return fontFace({ - typefaceId: typeface.id, - typefaceName: typeface.family, - style, - styleWithNormal: item.fontStyle, - weight: item.fontWeight, - commonWeightName: commonWeightNameMap(item.fontWeight), - woffPath: makeFontFilePath(item, "woff"), - woff2Path: makeFontFilePath(item, "woff2"), + defSubsetTypeface.subsets.forEach((subset, _, subsets) => { + css = variants.map(item => { + if (item.errored) { + return false + } + let style = "" + if (item.fontStyle !== `normal`) { + style = item.fontStyle + } + return fontFace({ + typefaceId: defSubsetTypeface.id, + typefaceName: defSubsetTypeface.family, + typefaceLocalName: item.local[0], + typefaceLocalName2: item.local[1], + style, + subset, + styleWithNormal: item.fontStyle, + weight: item.fontWeight, + commonWeightName: commonWeightNameMap(item.fontWeight), + woffPath: makeFontFilePath(item, subset, "woff"), + woff2Path: makeFontFilePath(item, subset, "woff2"), + }) }) + + const fileContent = css.join("") + const cssPath = `${typefaceDir}/${subset}.css` + console.log(`writing file ${cssPath}...`) + fs.writeFileSync(cssPath, fileContent) + if (subset === 'latin' || (subsets.length === 1)) { + fs.writeFileSync(`${typefaceDir}/index.css`, fileContent) + } }) - const cssPath = `${typefaceDir}/index.css` - fs.writeFileSync(`${typefaceDir}/index.css`, css.join("")) - console.log("finished downloading", typeface.family) + console.log("finished downloading", defSubsetTypeface.family) }) } ) diff --git a/scripts/templates.js b/scripts/templates.js index f78fc3726..c3bdfb1f9 100644 --- a/scripts/templates.js +++ b/scripts/templates.js @@ -29,8 +29,8 @@ exports.fontFace = _.template( font-display: swap; font-weight: <%= weight %>; src: - local('<%= typefaceName %> <%= commonWeightName %> <%= style %>'), - local('<%= typefaceName %>-<%= commonWeightName %><%= style %>'), + local('<%= typefaceLocalName %>'), + local('<%= typefaceLocalName2 %>'), url('<%= woff2Path %>') format('woff2'), /* Super Modern Browsers */ url('<%= woffPath %>') format('woff'); /* Modern Browsers */ } @@ -65,6 +65,17 @@ To use, simply require the package in your project’s entry file e.g. require('typeface-<%= typefaceId %>') \`\`\` +By default only basic subset of characters is included in the font file (it's Latin in most cases). +To add another one along the default, import specific CSS file. + +\`\`\`javascript +// Load <%= typefaceName %> typeface with Latin plus Latin Extended subset +require('typeface-<%= typefaceId %>/latin-ext.css') + +// Default subset is Latin +require('typeface-<%= typefaceId %>/latin.css') === require('typeface-<%= typefaceId %>') +\`\`\` + ## About the Typefaces project. Our goal is to add all open source fonts to NPM to simplify using great fonts in