feat: add variable font support (#103)

* initial setups

* feat: add variable font support

* fix: resolve slnt axes errors

* docs: add variable font documentation

Co-authored-by: Lotus <DecliningLotus@users.noreply.github.com>

.github/workflows/cron-run.yml

@@ -27,10 +27,13 @@ jobs:
           GOOGLE_API_KEY: ${{ secrets.GOOGLE_API_KEY }}
 
       - name: Parse APIv1
-        run: npm explore google-font-metadata -- yarn parser:v1
+        run: yarn parser:v1
 
       - name: Parse APIv2
-        run: npm explore google-font-metadata -- yarn parser:v2
+        run: yarn parser:v2
+
+      - name: Parse Variable
+        run: yarn parser:variable
 
       - name: Build fonts
         run: yarn build:google

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

@@ -28,10 +28,13 @@ jobs:
           GOOGLE_API_KEY: ${{ secrets.GOOGLE_API_KEY }}
 
       - name: Parse APIv1
-        run: npm explore google-font-metadata -- yarn parser:v1
+        run: yarn parser:v1
 
       - name: Parse APIv2
-        run: npm explore google-font-metadata -- yarn parser:v2
+        run: yarn parser:v2
+
+      - name: Parse Variable
+        run: yarn parser:variable
 
       - name: Build fonts
         run: yarn build:google-force

.github/workflows/manual-run.yml

@@ -28,10 +28,13 @@ jobs:
           GOOGLE_API_KEY: ${{ secrets.GOOGLE_API_KEY }}
 
       - name: Parse APIv1
-        run: npm explore google-font-metadata -- yarn parser:v1
+        run: yarn parser:v1
 
       - name: Parse APIv2
-        run: npm explore google-font-metadata -- yarn parser:v2
+        run: yarn parser:v2
+
+      - name: Parse Variable
+        run: yarn parser:variable
 
       - name: Build fonts
         run: yarn build:google

CHANGELOG.md

@@ -4,10 +4,20 @@ Fontsource will log all notable changes within this file.
 
 #### Patch (0.0.x)
 
-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.
+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 into the changelog. Note that Google may push [breaking changes](https://github.com/google/fonts/issues/1307) on their end to individual fonts which Fontsource cannot predict for.
+
+#### Minor (0.x.x)
+
+These will always contain changes from Fontsource's end.
 
 # 3.x Release
 
+## 3.1.x
+
+### Features
+
+- Initial variable font support for Google Fonts. Supported fonts can be found [here](https://fonts.google.com/variablefonts) with their package README's explaining installation instructions. [#103](https://github.com/fontsource/fontsource/pull/103)
+
 ## 3.0.x
 
 ### BREAKING CHANGES
@@ -21,9 +31,9 @@ These occur when an automatic update is pushed from a source, such as Google, or
 
 - 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)
 - Added package.json rebuilder. [#43](https://github.com/fontsource/fontsource/pull/43)
-- Added force rebuild to Google package. [#37](https://github.com/fontsource/fontsource/pull/37)
+- Added force rebuild to Google packages. [#37](https://github.com/fontsource/fontsource/pull/37)
 - Added force rebuild to non-Google packages. [#42](https://github.com/fontsource/fontsource/pull/42)
-- Autogenerate `FONTLIST.md`and added `FONTLIST.json`. [#58](https://github.com/fontsource/fontsource/pull/58)
+- Autogenerate `FONTLIST.md` and added `FONTLIST.json`. [#58](https://github.com/fontsource/fontsource/pull/58)
 - Copy `CHANGELOG.md` to every individual package. [#41](https://github.com/fontsource/fontsource/pull/41)
 
 ### Fixes

README.md

@@ -5,7 +5,7 @@
 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 search directory can be found [here](https://fontsource.github.io/search-directory/) (in very early development) or alternatively in Markdown format [here](https://github.com/fontsource/fontsource/blob/master/FONTLIST.md).
+Our supported font search directory can be found [here](https://fontsource.github.io/search-directory/) (in very early development and may contain outdated information) or alternatively in Markdown format [here](https://github.com/fontsource/fontsource/blob/master/FONTLIST.md).
 
 ##
 
@@ -57,6 +57,10 @@ body {
 }
 ```
 
+## Variable Fonts
+
+This repository supports variable fonts that Google Fonts provide. You can find the full list of available options [here](https://fonts.google.com/variablefonts). Instructions on how to install and use can be found on the relevant package README.
+
 ## 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.

package.json

@@ -35,6 +35,7 @@
     "build:google-force": "node scripts/google/download-google.js force",
     "parser:v1": "npm explore google-font-metadata -- yarn parser:v1",
     "parser:v2": "npm explore google-font-metadata -- yarn parser:v2",
+    "parser:variable": "npm explore google-font-metadata -- yarn variable:gen && npm explore google-font-metadata -- yarn variable:parse",
     "readme-update:google": "node scripts/google/google-readme-updater.js",
     "util:generic-rebuild": "node scripts/generic/rebuilder.js",
     "util:generic-renamer": "node scripts/generic/renamer.js",

scripts/google/download-google.js

@@ -1,13 +1,13 @@
-const _ = require(`lodash`)
-const async = require(`async`)
-const fs = require(`fs-extra`)
-const shell = require(`shelljs`)
+const _ = require("lodash")
+const async = require("async")
+const fs = require("fs-extra")
+const shell = require("shelljs")
 
-const { APIv2 } = require(`google-font-metadata`)
+const { APIv2, APIVariable } = require("google-font-metadata")
 const force = process.argv[2]
 
-fs.ensureDirSync(`packages`)
-fs.ensureDirSync(`scripts/temp_packages`)
+fs.ensureDirSync("packages")
+fs.ensureDirSync("scripts/temp_packages")
 
 // Create an async queue object
 const processQueue = (fontid, cb) => {
@@ -25,6 +25,9 @@ queue.drain(() => {
   console.log(
     `All ${Object.keys(APIv2).length} Google Fonts have been processed.`
   )
+  console.log(
+    `${Object.keys(APIVariable).length} variable fonts have been processed.`
+  )
 })
 
 queue.error((err, fontid) => {
@@ -33,7 +36,10 @@ queue.error((err, fontid) => {
 
 // Testing
 /* const test = () => {
-  queue.push(`noto-sans-jp`)
+  queue.push("recursive")
+  queue.push("texturina")
+  queue.push("cabin")
+  queue.push("actor")
 }
 test() */
 

scripts/google/run.js

@@ -1,10 +1,11 @@
-const fs = require(`fs-extra`)
-const jsonfile = require(`jsonfile`)
+const fs = require("fs-extra")
+const jsonfile = require("jsonfile")
 
-const { APIv2 } = require(`google-font-metadata`)
-const packagerv1 = require(`./packager-v1`)
-const packagerv2 = require(`./packager-v2`)
-const { readme, packageJson } = require(`./templates`)
+const { APIv2, APIVariable } = require("google-font-metadata")
+const packagerv1 = require("./packager-v1")
+const packagerv2 = require("./packager-v2")
+const variable = require("./variable")
+const { packageJson, readme, readmeVariable } = require("./templates")
 
 const id = process.argv[2]
 if (!id) {
@@ -48,15 +49,37 @@ if (changed || force === "force") {
   packagerv1(font.id)
   packagerv2(font.id)
 
+  let variableMeta = false
+  let variableFlag = false
+  if (font.id in APIVariable) {
+    variable(font.id)
+    variableMeta = APIVariable[font.id].axes
+
+    variableFlag = true
+  }
+
   // Write README.md
-  const packageReadme = readme({
-    fontId: font.id,
-    fontName: font.family,
-    subsets: font.subsets,
-    weights: font.weights,
-    styles: font.styles,
-    version: font.version,
-  })
+  let packageReadme
+  if (variableFlag) {
+    packageReadme = readmeVariable({
+      fontId: font.id,
+      fontName: font.family,
+      subsets: font.subsets,
+      weights: font.weights,
+      styles: font.styles,
+      version: font.version,
+    })
+  } else {
+    packageReadme = readme({
+      fontId: font.id,
+      fontName: font.family,
+      subsets: font.subsets,
+      weights: font.weights,
+      styles: font.styles,
+      version: font.version,
+    })
+  }
+
   fs.writeFileSync(`${fontDir}/README.md`, packageReadme)
 
   // Don't create package.json if already exists to prevent lerna versioning conflicts
@@ -78,6 +101,7 @@ if (changed || force === "force") {
     weights: font.weights,
     styles: font.styles,
     defSubset: font.defSubset,
+    variable: variableMeta,
     lastModified: font.lastModified,
     version: font.version,
     source: "https://fonts.google.com/",

scripts/google/templates.js

@@ -59,6 +59,33 @@ exports.fontFaceUnicode = _.template(
 `
 )
 
+exports.fontFaceVariable = _.template(
+  `/* <%= fontId %>-<%= subset %>-variable-<%= type %>-<%= style %> */
+@font-face {
+  font-family: '<%= fontName %>';
+  font-style: <%= style %>;
+  font-display: swap;
+  font-weight: <%= weight %>;
+  src: url('<%= woff2Path %>') format('woff2');
+  unicode-range: <%= unicodeRange %>;
+}  
+`
+)
+
+exports.fontFaceVariableWdth = _.template(
+  `/* <%= fontId %>-<%= subset %>-variable-<%= type %>-<%= style %> */
+@font-face {
+  font-family: '<%= fontName %>';
+  font-style: <%= style %>;
+  font-display: swap;
+  font-weight: <%= weight %>;
+  font-stretch: <%= wdth %>;
+  src: url('<%= woff2Path %>') format('woff2');
+  unicode-range: <%= unicodeRange %>;
+}  
+`
+)
+
 exports.readme = _.template(
   `# Fontsource <%= fontName %>
 
@@ -135,3 +162,122 @@ 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/fontsource/fontsource/issues).
 `
 )
+
+exports.readmeVariable = _.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/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/fontsource/fontsource) to view more details on this package.
+
+## Installation
+
+Fontsource assumes you are using a bundler, such as Webpack, to load in CSS. Solutions like [CRA](https://create-react-app.dev/), [Gatsby](https://www.gatsbyjs.org/) and [Next.js](https://nextjs.org/) are prebuilt examples that are compatible.
+
+\`\`\`javascript
+yarn add fontsource-<%= fontId %> // npm install fontsource-<%= fontId %>
+\`\`\`
+
+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 (\`index.js\`), or \`gatsby-browser.js\`.
+
+\`\`\`javascript
+import "fontsource-<%= fontId %>" // Defaults to weight 400 with all styles included.
+\`\`\`
+
+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-<%= fontId %>/500.css" // All styles included.
+import "fontsource-<%= fontId %>/900-normal.css" // Select either normal or italic.
+\`\`\`
+
+Alternatively, the same solutions could be imported via SCSS!
+
+\`\`\`scss
+@import "~fontsource-<%= fontId %>/index.css";
+@import "~fontsource-<%= fontId %>/300-italic.css";
+\`\`\`
+
+_These examples may not reflect actual compatibility. Please refer below._
+
+Supported variables:
+
+- Weights: \`[<%= weights %>]\`
+- Styles: \`[<%= styles %>]\`
+
+Finally, you can reference the font name in a CSS stylesheet, CSS Module, or CSS-in-JS.
+
+\`\`\`css
+body {
+  font-family: "<%= fontName %>";
+}
+\`\`\`
+
+## Variable Fonts
+
+This particular typeface supports [variable fonts](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide).
+
+Begin by importing both the variable and fallback font for non-compatible browsers.
+
+\`\`\`js
+import "fontsource-<%= fontId %>/400.css" // Weight 400
+\`\`\`
+
+Select either a stripped down weights only variant of the font or a full feature variant that contains all the variable axes.
+
+\`\`\`js
+import "fontsource-<%= fontId %>/variable.css" // Contains ONLY variable weights and no other axes. Both normal and italic.
+import "fontsource-<%= fontId %>/variable-normal.css" // Normal variant.
+import "fontsource-<%= fontId %>/variable-italic.css" // Italic variant.
+// Or
+import "fontsource-<%= fontId %>/variable-full.css" // This contains ALL variable axes. Font files are larger. Both normal and italic.
+import "fontsource-<%= fontId %>/variable-full-normal.css" // Normal variant.
+import "fontsource-<%= fontId %>/variable-full-italic.css" // Italic variant.
+\`\`\`
+
+Note a \`full\` or \`italic\` variant may NOT exist if there are no additional axes other than weight.
+
+Followed by the CSS using the @supports tag, which checks whether the browser is capable of utilising variable fonts. Fallback fonts and their relevant CSS should be used outside the block, whilst all variable options should be used within the @supports block and utilising the font-variation-settings tag.
+
+\`\`\`css
+h1 {
+  font-family: <%= fontName %>;
+  font-weight: 400;
+}
+
+@supports (font-variation-settings: normal) {
+  h1 {
+    font-family: <%= fontName %>Variable;
+    font-variation-settings: "wght" 400;
+  }
+}
+\`\`\`
+
+_To view the available variable axes that may be included in the font, click [here](https://fonts.google.com/variablefonts). The meanings of all axes and the restrictions associated with them are explained there._
+
+## 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-<%= fontId %>/latin-ext.css" // All weights and styles included.
+import "fontsource-<%= fontId %>/cyrillic-ext-500.css" // All styles included.
+import "fontsource-<%= fontId %>/greek-900-normal.css" // Select either normal or italic.
+\`\`\`
+
+- Supported subsets: \`[<%= subsets %>]\`
+
+## Licensing
+
+It is important to always read the license for every font that you use.
+Most of the fonts in the collection use the SIL Open Font License, v1.1. Some fonts use the Apache 2 license. The Ubuntu fonts use the Ubuntu Font License v1.0.
+
+[Google Fonts License Attributions](https://fonts.google.com/attribution)
+
+## Other Notes
+
+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/fontsource/fontsource/issues).
+`
+)