diff --git a/README.md b/README.md index 0720944e9..b904f9152 100644 --- 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 `` 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 index bf2aeaaf0..0f8e175a7 100644 --- 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 index d9901858b..f4141c399 100644 --- 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,7 +132,7 @@ 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`) { @@ -134,28 +140,40 @@ async.map( } 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 index 031d5e6ce..1fabbeaac 100644 --- a/scripts/templates.js +++ b/scripts/templates.js @@ -38,11 +38,17 @@ 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 @@ -50,21 +56,36 @@ The CSS and web font files to easily self-host “<%= typefaceName %>”. ## 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