From 1689c0c3d8f1babf276fcc5e8d67598655354011 Mon Sep 17 00:00:00 2001 From: David Beitey Date: Wed, 15 Jan 2020 14:18:09 +1000 Subject: [PATCH 1/2] Add link to google-webfonts-helper project --- how-to-update.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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` From d0b67758cccf98c240d8b745ab59bc745dd8dd88 Mon Sep 17 00:00:00 2001 From: David Beitey Date: Thu, 16 Jan 2020 13:29:44 +1000 Subject: [PATCH 2/2] Add SCSS support This implements #79. This adds support to typeface packages by introducing a `_typeface.scss` partial, which at present exists to facilitate setting a font-path variable for a given typeface. This is to enable support of Sass-centric build systems, such as via sass directly, where font files will be copied/put into a known location by another process. The implementation means this is possible: ``` $open-sans-font-path: "../fonts/open-sans" !default; @import "typeface-open-sans/typeface"; ``` and the resulting CSS is populated with the correct font-path as set. The naming of the imported partial is arbitrary -- it could just as easily be `fonts` or something else. Ideally, it would have been `index.scss` or `_index.scss` to enable a simple `@import "typeface-open-sans"` from within Sass, but this causes ambiguity with the existing `index.css` file and Sass won't build if both files are present (it used to be a warning and is now an error). The choice to have typeface-specific variable names gives flexibility over one `$font-path` variable so you can set different paths for different typefaces (plus being more specific means less chance of a conflict in existing projects). The implementation in the code itself adds only a few minor changes to the build script and templates. There are no changes to the existing CSS build for full backward compatibility. --- README.md | 6 +- scripts/create-package-from-google-font-id.js | 66 ++++++++++++------- scripts/templates.js | 31 +++++++-- 3 files changed, 71 insertions(+), 32 deletions(-) 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/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