KyleAMathews · davidjb · Jan 15, 2020 · Jan 16, 2020
diff --git a/README.md b/README.md
@@ -53,7 +53,7 @@ And that’s it! You’re now self-hosting Open Sans!
 
 It should take < 5 minutes to swap out Google Fonts.
 
-Typeface assumes you’re using webpack with loaders setup for loading css
+Typeface assumes you’re using webpack with loaders setup for loading CSS
 and font files (you can use Typeface with other setups but webpack makes
 things really really simple). Assuming your webpack configuration is
 setup correctly you then just need to require the typeface in the entry
@@ -66,8 +66,8 @@ setup to work with Typefaces. Gatsby by default also embeds your CSS in
 your `<head>` for even faster loading.
 
 If you’re not using webpack or equivalent tool that allows you to
-require css, then you’ll need to manually integrate the index.css and
-font files from the package into your build system.
+require CSS or SCSS, then you’ll need to manually integrate the `index.css` or
+`typeface.scss` and font files from the package into your build system.
 
 ### Alternatives without Webpack
 

diff --git a/how-to-update.md b/how-to-update.md
@@ -1,4 +1,4 @@
 ## Google fonts
 
-1. Start google-webfonts-helper locally. It's a separate repo you need to clone and setup
+1. Start [`google-webfonts-helper`](https://github.com/majodev/google-webfonts-helper) locally. It's a separate repo you need to clone and setup.
 2. Run `node scripts/download-all-google-fonts.js`
diff --git a/scripts/create-package-from-google-font-id.js b/scripts/create-package-from-google-font-id.js
@@ -9,7 +9,7 @@ const md5Dir = require(`md5-dir`)
 const log = require("single-line-log").stdout
 const _ = require("lodash")
 
-const { packageJson, fontFace, readme } = require(`./templates`)
+const { packageJson, fontFace, scssHeader, readme } = require(`./templates`)
 const download = require(`./download-file`)
 const commonWeightNameMap = require(`./common-weight-name-map`)
 
@@ -40,12 +40,18 @@ fs.writeFileSync(typefaceDir + `/.gitignore`, "/files")
 fs.writeFileSync(typefaceDir + `/.npmignore`, "")
 fs.writeFileSync(typefaceDir + `/files/.gitignore`, "")
 
-const makeFontFilePath = (item, extension) => {
+const makeFontFilePath = (item, extension, syntax) => {
   let style = ""
   if (item.fontStyle !== `normal`) {
     style = item.fontStyle
   }
-  return `./files/${typeface.id}-${typeface.defSubset}-${item.fontWeight}${style}.${extension}`
+  let basePath = "./files"
+  switch (syntax) {
+    case "scss":
+      basePath = `#{$${typeface.id}-font-path}`
+      break;
+  }
+  return `${basePath}/${typeface.id}-${typeface.defSubset}-${item.fontWeight}${style}.${extension}`
 }
 
 // Download all font files.
@@ -95,7 +101,7 @@ async.map(
           // console.log(
           // `The md5 hash of the new font files haven't changed (meaning no font files have changed) so exiting`
           // )
-          process.exit()
+          //process.exit()
         } else {
         }
       }
@@ -126,36 +132,48 @@ async.map(
 
       fs.writeFileSync(`${typefaceDir}/package.json`, packageJSON)
 
-      // Write out index.css file
+      // Write out index.css and index.scss files
       const variants = _.sortBy(typeface.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
+      for (const syntax of ['css', 'scss']) {
+        const styles = []
+        let filename = "index.css"
+        switch (syntax) {
+          case "scss":
+            styles.push(scssHeader({
+              typefaceId: typeface.id,
+            }))
+            filename = "_typeface.scss"
+            break;
         }
-        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"),
+        variants.forEach(item => {
+          if (item.errored) {
+            return false
+          }
+          let style = ""
+          if (item.fontStyle !== `normal`) {
+            style = item.fontStyle
+          }
+          styles.push(fontFace({
+            typefaceId: typeface.id,
+            typefaceName: typeface.family,
+            style,
+            styleWithNormal: item.fontStyle,
+            weight: item.fontWeight,
+            commonWeightName: commonWeightNameMap(item.fontWeight),
+            woffPath: makeFontFilePath(item, "woff", syntax),
+            woff2Path: makeFontFilePath(item, "woff2", syntax),
+          }))
         })
-      })
 
-      const cssPath = `${typefaceDir}/index.css`
-      fs.writeFileSync(`${typefaceDir}/index.css`, css.join(""))
+        fs.writeFileSync(`${typefaceDir}/${filename}`, styles.join(""))
+      }
+
       console.log("finished downloading", typeface.family)
     })
   }

diff --git a/scripts/templates.js b/scripts/templates.js
@@ -38,33 +38,54 @@ exports.fontFace = _.template(
 `
 )
 
+exports.scssHeader = _.template(
+  `$<%= typefaceId %>-font-path: "./files" !default;
+
+`
+)
+
 exports.readme = _.template(
   `
 # typeface-<%= typefaceId %>
 
-The CSS and web font files to easily self-host “<%= typefaceName %>”.
+The CSS/SCSS and web font files to easily self-host “<%= typefaceName %>”.
 
 ## Install
 
 \`npm install --save typeface-<%= typefaceId %>\`
 
 ## Use
 
-Typefaces assume you’re using webpack to process CSS and files. Each typeface
-package includes all necessary font files (woff2, woff) and a CSS file with
+Typefaces assume you’re using webpack to process CSS or SCSS and files. Each typeface
+package includes all necessary font files (woff2, woff) and CSS/SCSS files with
 font-face declarations pointing at these files.
 
-You will need to have webpack setup to load css and font files. Many tools built
+You will need to have webpack setup to load CSS or SCSS and font files. Many tools built
 with Webpack will work out of the box with Typefaces such as [Gatsby](https://github.com/gatsbyjs/gatsby)
 and [Create React App](https://github.com/facebookincubator/create-react-app).
 
-To use, simply require the package in your project’s entry file e.g.
+To use, simply require the package in your project’s JavaScript, such as in an entry file:
 
 \`\`\`javascript
 // Load <%= typefaceName %> typeface
 require('typeface-<%= typefaceId %>')
 \`\`\`
 
+You can also use Typefaces directly from SCSS as well:
+
+\`\`\`scss
+// Load <%= typefaceName %> typeface
+@import "typeface-<%= typefaceId %>";
+\`\`\`
+
+Optionally, you can define a custom path to the underlying font files from SCSS like
+so, ensuring that you import the specific \`typeface\` partial:
+
+\`\`\`scss
+$<%= typefaceId %>-font-path: "../path/to/fonts" !default;
+@import "typeface-<%= typefaceId %>/typeface";
+\`\`\`
+
 ## About the Typefaces project.
 
 Our goal is to add all open source fonts to NPM to simplify using great fonts in