Unicode Range Support (Breaking Changes)

.github/workflows/cron-run.yml

@@ -29,9 +29,15 @@ jobs:
       - name: Parse APIv1
         run: npm explore google-font-metadata -- yarn parser:v1
 
-      - name: Build fonts
+      - name: Build fonts APIv1
         run: yarn build:googlev1
 
+      - name: Parse APIv2
+        run: npm explore google-font-metadata -- yarn parser:v2
+
+      - name: Build fonts APIv2
+        run: yarn build:googlev2
+
       - name: Format files
         run: yarn format
 

.github/workflows/manual-run-force.yml

@@ -0,0 +1,69 @@
+name: Build and Release [Force Rebuild] [Manual]
+
+on: [workflow_dispatch]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    if: github.actor == 'DecliningLotus'
+
+    steps:
+      - name: checkout
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: "0"
+
+      - name: Configure CI Git User
+        run: |
+          git config --global user.name 'DecliningLotus'
+          git config --global user.email 'DecliningLotus@users.noreply.github.com'
+
+      - name: Install packages
+        run: yarn
+
+      - name: Fetch API
+        run: npm explore google-font-metadata -- node ./scripts/api-gen.js $GOOGLE_API_KEY
+        env:
+          GOOGLE_API_KEY: ${{ secrets.GOOGLE_API_KEY }}
+
+      - name: Parse APIv1
+        run: npm explore google-font-metadata -- yarn parser:v1
+
+      - name: Build fonts APIv1
+        run: yarn build:googlev1-force
+
+      - name: Parse APIv2
+        run: npm explore google-font-metadata -- yarn parser:v2
+
+      - name: Build fonts APIv2
+        run: yarn build:googlev2-force
+
+      - name: Format files
+        run: yarn format
+
+      - name: Stage changes
+        run: git add --all
+
+      - name: Commit files
+        run: >-
+          git commit -m "chore(build): update fontsources $GITHUB_RUN_NUMBER"
+        continue-on-error: true
+
+      - name: Push changes
+        uses: ad-m/github-push-action@master
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Authenticate with Registry
+        run: |
+          yarn logout
+          echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> .npmrc
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+      - name: Publish package
+        run: npm run deploy:ci
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/manual-run.yml

@@ -30,9 +30,15 @@ jobs:
       - name: Parse APIv1
         run: npm explore google-font-metadata -- yarn parser:v1
 
-      - name: Build fonts
+      - name: Build fonts APIv1
         run: yarn build:googlev1
 
+      - name: Parse APIv2
+        run: npm explore google-font-metadata -- yarn parser:v2
+
+      - name: Build fonts APIv2
+        run: yarn build:googlev2
+
       - name: Format files
         run: yarn format
 

CHANGELOG.md

@@ -4,11 +4,24 @@ Fontsource will log all notable changes within this file.
 
 #### Patch (0.0.x)
 
-These are not logged here as they are typically automatic updates from the source, such as Google, themselves. On occasion, patches may be applied from Fontsource, however, different fonts are likely to be associated with different versions per update and isn't accurately tracked here.
+These occur when an automatic update is pushed from a source, such as Google, or Fontsource may apply patches. Due to version mismatching and lack of accurate tracking, a specific version for a Fontsource patch cannot be logged. Fixes are mentioned in each minor update instead.
 
-#### Minor (0.x.x)
+# 3.x Release
 
-These updates are usually feature additions or changes from Fontsource that are logged below.
+## 3.0.x
+
+### BREAKING CHANGES
+
+`import fontsource-<font name>` or `index.css` no longer defaults to contain ALL weights and styles for a font. It now only contains weight 400 with all styles included. This was changed to prevent fonts, such as Noto Sans JP, to counter-intuitively generate 1MB+ CSS files with the new unicode-range feature.
+
+Simply choose the necessary weights and styles from now on with `import fontsource-<font name>/<weight>.css` or `import fontsource-<font name>/<weight>-<style>.css`.
+
+### Features
+
+- Added unicode-range CSS selector to all fonts. It is no longer necessary for individual subsets to be defined when importing CSS files but backwards compatability remains. Use `import fontsource-<font name>/<weight>.css` or `import fontsource-<font name>/<weight>-<style>.css` to leverage the new feature from now on. [#37](https://github.com/fontsource/fontsource/pull/37)
+- Adjusted template.js to add more repository information to package.json. [#37](https://github.com/fontsource/fontsource/pull/37)
+
+# 2.x Release
 
 ## 2.2.x
 
@@ -17,11 +30,23 @@ These updates are usually feature additions or changes from Fontsource that are
 - Added TTF/OTF support for every package for older browser compatability. [#33](https://github.com/fontsource/fontsource/pull/33)
 - Refactored entire API source from [majodev/google-webfonts-helper](https://github.com/majodev/google-webfonts-helper) to [fontsource/google-font-metadata](https://github.com/fontsource/google-font-metadata) for future expandability. [#33](https://github.com/fontsource/fontsource/pull/33)
 
+### Fixes
+
+- Add Yarn resolution to resolve Lerna publish errors. [f6e7b1f](https://github.com/fontsource/fontsource/commit/f6e7b1f08639d1e3c17a52e485ef24fb9980b5d9)
+
 ## 2.1.x
 
 ### Features
 
-- Added metadata.json files to each package that contains useful data that allows Fontsource or external users to leverage to pull information from. [#27](https://github.com/fontsource/fontsource/pull/27) [#28](https://github.com/fontsource/fontsource/pull/28)
+- Added metadata.json files to each package that contains useful data that allows Fontsource or external users to leverage to pull information from. [#26](https://github.com/fontsource/fontsource/pull/26) [#27](https://github.com/fontsource/fontsource/pull/27) [#28](https://github.com/fontsource/fontsource/pull/28)
+- Account for rare possible instance of oblique font-style [#26](https://github.com/fontsource/fontsource/pull/26)
+
+### Fixes
+
+- Correct src: locals() in CSS generation to reflect upstream source accurately. [#10](https://github.com/fontsource/fontsource/pull/10) [#11](https://github.com/fontsource/fontsource/pull/11)
+- Resolve incorrect SCSS documentation + general improvements [#23](https://github.com/fontsource/fontsource/pull/23)
+- Ensure no old files remain from a font update [#24](https://github.com/fontsource/fontsource/pull/24)
+- Allow index.css generation for fonts without latin subset [#25](https://github.com/fontsource/fontsource/pull/25)
 
 ## 2.0.x
 

README.md

@@ -2,15 +2,16 @@
 
 [![Generic badge](https://img.shields.io/badge/fontsource-passing-brightgreen)](https://github.com/DecliningLotus/fontsource) [![License](https://badgen.net/badge/license/MIT/green)](https://github.com/DecliningLotus/fontsource/blob/master/LICENSE) [![GitHub stars](https://img.shields.io/github/stars/DecliningLotus/fontsource.svg?style=social&label=Star)](https://GitHub.com/DecliningLotus/fontsource/stargazers/)
 
-An updating monorepo rebuilt off of its predecessor [Typefaces](https://github.com/KyleAMathews/typefaces), full of self-hostable Open Source fonts bundled into individual NPM packages!
+An updating monorepo full of self-hostable Open Source fonts bundled into individual NPM packages!
+Inspired by the aging [Typefaces](https://github.com/KyleAMathews/typefaces) project and primarily built using [Google Font Metadata](https://github.com/fontsource/google-font-metadata),
 
 Our supported font list can be found [here](https://github.com/DecliningLotus/fontsource/blob/master/FONTLIST.md).
 
 ## About
 
 - Self-hosting brings _significant performance gains_ as typically loading fonts from hosted font services, such as Google Fonts, lead to an extra (render blocking) network request. To provide perspective, for simple websites it has been seen to _double_ visual load times. Benchmarks can be found [here](https://github.com/HTTPArchive/almanac.httparchive.org/pull/607) and [here](https://github.com/reactiflux/reactiflux.com/pull/21).
 
-- Fonts remain _version locked_. Google often pushes updates to their fonts without notice, which may interfere with your live production projects. Manage your fonts like any other NPM dependency.
+- Fonts remain _version locked_. Google often pushes updates to their fonts [without notice](https://github.com/google/fonts/issues/1307), which may interfere with your live production projects. Manage your fonts like any other NPM dependency.
 
 - Your _fonts load offline_. Often there may be situations, like working in an airplane or train, leaving you stranded without access to your online hosted fonts. Have the ability to keep working under any circumstance.
 
@@ -29,22 +30,21 @@ yarn add fontsource-open-sans // npm install fontsource-open-sans
 Then within your app entry file or site component, import it in. For example in Gatsby, you could choose to import it into a layout template (`layout.js`), page component, or `gatsby-browser.js`.
 
 ```javascript
-import "fontsource-open-sans" // require("fontsource-open-sans")
+import "fontsource-open-sans" // Defaults to weight 400 with all styles included.
 ```
 
-Fontsource allows you to select font subsets, weights and even individual styles, allowing you to cut down on payload sizes to the last byte! The default selection above, however, sticks to the Latin subset including all weights and styles.
+Fontsource allows you to select weights and even individual styles, allowing you to cut down on payload sizes to the last byte! Utilizing the CSS unicode-range selector, all language subsets are accounted for.
 
 ```javascript
-import "fontsource-open-sans/latin-ext.css" // All weights and styles included.
-import "fontsource-open-sans/cyrillic-ext-400.css" // All styles included.
-import "fontsource-open-sans/greek-700-normal.css" // Select either normal or italic.
+import "fontsource-open-sans/500.css" // All styles included.
+import "fontsource-open-sans/900-normal.css" // Select either normal or italic.
 ```
 
 Alternatively, the same solutions could be imported via SCSS!
 
 ```scss
 @import "~fontsource-open-sans/index.css";
-@import "~fontsource-open-sans/vietnamese-300-italic.css";
+@import "~fontsource-open-sans/300-italic.css";
 ```
 
 _Do confirm on Google Fonts (or elsewhere) whether your font supports a certain subset, weight or style beforehand as these examples may not reflect actual compatibility._
@@ -57,6 +57,22 @@ body {
 }
 ```
 
+## Additional Options
+
+In the rare case you need to individually select a language subset and not utilize the CSS unicode-range selector, you may specify the import as follows. This is especially not recommended for languages, such as Japanese, with a large amount of characters.
+
+```javascript
+import "fontsource-open-sans/latin-ext.css" // All weights and styles included.
+import "fontsource-open-sans/cyrillic-ext-500.css" // All styles included.
+import "fontsource-open-sans/greek-900-normal.css" // Select either normal or italic.
+```
+
+_Examples above may not reflect actual variant availability._
+
+## Migrating from 2.x to 3.x
+
+See [CHANGELOG.md](https://github.com/fontsource/fontsource/blob/master/CHANGELOG.md) for more details.
+
 ## Adding New Fonts
 
 For Open Source fonts that are not automatically updated by the Google ecosystem, we have a generic packager that builds CSS files for you. Click [here](https://github.com/DecliningLotus/fontsource/blob/master/scripts/generic/generic-packager.md) to see how to use it.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontsource",
-  "version": "2.2.1",
+  "version": "3.0.0",
   "author": "Lotus <declininglotus@gmail.com>",
   "license": "MIT",
   "devDependencies": {
@@ -29,6 +29,8 @@
     "build:generic": "node scripts/generic/generic-font-packager.js",
     "build:googlev1": "node scripts/google/download-google-v1.js",
     "build:googlev2": "node scripts/google/download-google-v2.js",
+    "build:googlev1-force": "node scripts/google/download-google-v1.js force",
+    "build:googlev2-force": "node scripts/google/download-google-v2.js force",
     "parser:v1": "npm explore google-font-metadata -- yarn parser:v1",
     "parser:v2": "npm explore google-font-metadata -- yarn parser:v2",
     "readme-update:google": "node scripts/google/google-readme-updater.js",

scripts/generic/templates.js

@@ -18,7 +18,8 @@ exports.packageJson = _.template(
   ],
   "author": "Lotus <declininglotus@gmail.com>",
   "license": "MIT",
-  "repository": "https://github.com/DecliningLotus/fontsource/tree/master/packages/<%= fontId %>"
+  "repository": "https://github.com/fontsource/fontsource/tree/master/packages/<%= fontId %>",
+  "homepage": "https://github.com/fontsource/fontsource"
 }
 `
 )
@@ -42,9 +43,9 @@ exports.fontFace = _.template(
 
 exports.readme = _.template(
   `# Fontsource <%= fontName %>
-[![npm version](https://badge.fury.io/js/fontsource-<%= fontId %>.svg)](https://www.npmjs.com/package/fontsource-<%= fontId %>) [![Generic badge](https://img.shields.io/badge/fontsource-passing-brightgreen)](https://github.com/DecliningLotus/fontsource) [![Monthly downloads](https://badgen.net/npm/dm/fontsource-<%= fontId %>)](https://github.com/DecliningLotus/fontsource) [![Total downloads](https://badgen.net/npm/dt/fontsource-<%= fontId %>)](https://github.com/DecliningLotus/fontsource) [![GitHub stars](https://img.shields.io/github/stars/DecliningLotus/fontsource.svg?style=social&label=Star)](https://GitHub.com/DecliningLotus/fontsource/stargazers/)
+[![npm version](https://badge.fury.io/js/fontsource-<%= fontId %>.svg)](https://www.npmjs.com/package/fontsource-<%= fontId %>) [![Generic badge](https://img.shields.io/badge/fontsource-passing-brightgreen)](https://github.com/fontsource/fontsource) [![Monthly downloads](https://badgen.net/npm/dm/fontsource-<%= fontId %>)](https://github.com/fontsource/fontsource) [![Total downloads](https://badgen.net/npm/dt/fontsource-<%= fontId %>)](https://github.com/fontsource/fontsource) [![GitHub stars](https://img.shields.io/github/stars/DecliningLotus/fontsource.svg?style=social&label=Star)](https://github.com/fontsource/fontsource/stargazers)
 
-The CSS and web font files to easily self-host the “<%= fontName %>” font. Please visit the main [Fontsource monorepo](https://github.com/DecliningLotus/fontsource) to view more details on this package.
+The CSS and web font files to easily self-host the “<%= fontName %>” font. Please visit the main [Fontsource monorepo](https://github.com/fontsource/fontsource) to view more details on this package.
 
 ## Installation
 
@@ -101,7 +102,7 @@ Font [Source](<%= source %>) and [License](<%= license %>).
 
 Font version (provided by source): \`<%= version %>\`.
 
-Feel free to star and contribute new ideas to this repository that aim to improve the performance of font loading, as well as expanding the existing library we already have. Any suggestions or ideas can be voiced via an [issue](https://github.com/DecliningLotus/fontsource/issues).
+Feel free to star and contribute new ideas to this repository that aim to improve the performance of font loading, as well as expanding the existing library we already have. Any suggestions or ideas can be voiced via an [issue](https://github.com/fontsource/fontsource/issues).
 
 `
 )

scripts/google/download-google-v1.js

@@ -5,14 +5,19 @@ const shell = require(`shelljs`)
 
 const fontsv1 = require(`google-font-metadata/data/google-fonts-v1.json`)
 
+const force = process.argv[2]
+
 fs.ensureDirSync(`packages`)
 
 // Create an async queue object
-const processQueue = (font, cb) => {
-  console.log(`Downloading ${font}`)
-  shell.exec(`node ./scripts/google/google-font-packager-v1.js ${font}`, () => {
-    cb()
-  })
+const processQueue = (fontid, cb) => {
+  console.log(`Downloading ${fontid}`)
+  shell.exec(
+    `node ./scripts/google/google-font-packager-v1.js ${fontid} ${force}`,
+    () => {
+      cb()
+    }
+  )
 }
 
 // EventEmitter listener is usually set at a default limit of 10, below chosen 12 concurrent workers
@@ -25,25 +30,23 @@ queue.drain(() => {
   )
 })
 
-queue.error((err, font) => {
-  console.error(`${font} experienced an error.`)
+queue.error((err, fontid) => {
+  console.error(`${fontid} experienced an error.`)
 })
 
 // Testing
-/*const test = () => {
+/* const test = () => {
   queue.push(`roboto`) // 7 subsets, 12 styles
   queue.push(`orienta`) // 1 subset, 2 styles
   queue.push(`arbutus`) // 2 subsets, 1 style
-  queue.push(`mate-sc`) // 1 subset, 1 style
-  queue.push(`noticia-text`) // 3 subsets, 4 styles
+  queue.push(`mate-sc`) // 1 subset, 1 styles
   queue.push(`open-sans`)
   queue.push(`lato`)
   queue.push(`montserrat`)
+  queue.push(`noticia-text`)
   queue.push(`noto-sans-jp`)
-  queue.push(`b612-mono`)
-  queue.push(`b612`)
 }
-test()*/
+test() */
 
 // Production
 const production = () => {

scripts/google/download-google-v2.js

@@ -0,0 +1,57 @@
+const _ = require(`lodash`)
+const async = require(`async`)
+const fs = require(`fs-extra`)
+const shell = require(`shelljs`)
+
+const fontsv2 = require(`google-font-metadata`)
+
+const force = process.argv[2]
+
+fs.ensureDirSync(`packages`)
+
+// Create an async queue object
+const processQueue = (fontid, cb) => {
+  console.log(`Downloading ${fontid}`)
+  shell.exec(
+    `node ./scripts/google/google-font-packager-v2.js ${fontid} ${force}`,
+    () => {
+      cb()
+    }
+  )
+}
+
+// EventEmitter listener is usually set at a default limit of 10, below chosen 12 concurrent workers
+require("events").EventEmitter.defaultMaxListeners = 0
+const queue = async.queue(processQueue, 12)
+
+queue.drain(() => {
+  console.log(
+    `All ${Object.keys(fontsv2).length} Google Fonts V2 have been processed.`
+  )
+})
+
+queue.error((err, fontid) => {
+  console.error(`${fontid} experienced an error.`)
+})
+
+// Testing
+/* const test = () => {
+  queue.push(`roboto`) // 7 subsets, 12 styles
+  queue.push(`orienta`) // 1 subset, 2 styles
+  queue.push(`arbutus`) // 2 subsets, 1 style
+  queue.push(`mate-sc`) // 1 subset, 1 styles
+  queue.push(`open-sans`)
+  queue.push(`lato`)
+  queue.push(`montserrat`)
+  queue.push(`noticia-text`)
+  queue.push(`noto-sans-jp`)
+}
+test() */
+
+// Production
+const production = () => {
+  _.forOwn(fontsv2, font => {
+    queue.push(`${font.id}`)
+  })
+}
+production()