-
Notifications
You must be signed in to change notification settings - Fork 89
Expand file tree
/
Copy pathtemplates.js
More file actions
88 lines (70 loc) · 2.58 KB
/
Copy pathtemplates.js
File metadata and controls
88 lines (70 loc) · 2.58 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
const _ = require(`lodash`)
exports.packageJson = _.template(
`
{
"name": "typeface-<%= typefaceId %>",
"version": "0.0.0",
"description": "<%= typefaceName %> typeface",
"main": "index.css",
"keywords": [
"typeface",
"font",
"font family",
"google fonts",
"<%= typefaceId %>"
],
"author": "Kyle Mathews <mathews.kyle@gmail.com>",
"license": "MIT",
"repository": "https://github.com/KyleAMathews/typefaces/tree/master/packages/<%= typefaceId %>"
}
`
)
exports.fontFace = _.template(
`/* <%= typefaceId %>-<%= weight %><%= styleWithNormal %> - latin */
@font-face {
font-family: '<%= typefaceName %>';
font-style: <%= styleWithNormal %>;
font-display: swap;
font-weight: <%= weight %>;
src:
local('<%= typefaceLocalName %>'),
local('<%= typefaceLocalName2 %>'),
url('<%= woff2Path %>') format('woff2'), /* Super Modern Browsers */
url('<%= woffPath %>') format('woff'); /* Modern Browsers */
}
`
)
exports.readme = _.template(
`
# typeface-<%= typefaceId %>
The CSS 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, eot, ttf, svg) and
a CSS file with font-face declarations pointing at these files.
You will need to have webpack setup to load css 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.
\`\`\`javascript
// Load <%= typefaceName %> typeface
require('typeface-<%= typefaceId %>')
\`\`\`
By default only basic subset of characters is included in the font file (it's Latin in most cases).
To add another one along the default, import specific CSS file.
\`\`\`javascript
// Load <%= typefaceName %> typeface with Latin plus Latin Extended subset
require('typeface-<%= typefaceId %>/latin-ext.css')
// Default subset is Latin
require('typeface-<%= typefaceId %>/latin.css') === require('typeface-<%= typefaceId %>')
\`\`\`
## About the Typefaces project.
Our goal is to add all open source fonts to NPM to simplify using great fonts in
our web projects. We’re currently maintaining <%= count %> typeface packages
including all typefaces on Google Fonts.
If your favorite typeface isn’t published yet, [let us know](https://github.com/KyleAMathews/typefaces)
and we’ll add it!
`
)