Produce NPM package with various font formats and stylesheets

.gitignore

@@ -4,3 +4,6 @@
 #*
 *.swp
 !.gitignore
+dist
+node_modules
+stylesheet.css

README.md

@@ -2,6 +2,26 @@
 
 This is a copy of Solbera's CC-BY-SA-4.0 fonts taken from [his Reddit thread](https://www.reddit.com/r/UnearthedArcana/comments/3vpphx/5e_font_package_embeddable_cc_edition/), combined with Ryrok's fixes from [this Reddit thread](https://www.reddit.com/r/UnearthedArcana/comments/4loka0/fixed_versions_of_solberas_fonts/) and fixes and additions by [Ners](https://www.reddit.com/r/UnearthedArcana/comments/71wzc2/new_indesign_template_and_open_source_fonts/) ("Remake") with some minor adjustment made by [LUCASTUCIOUS](http://github.com/lucastucious).
 
+[![Latest version](https://img.shields.io/npm/v/solbera-dnd-fonts)
+ ![Dependency status](https://img.shields.io/librariesio/release/npm/solbera-dnd-fonts)
+](https://www.npmjs.com/package/solbera-dnd-fonts)
+
+Use NPM or other package manager to install the package or to download and unpack the tarball with them:
+
+    npm i -D solbera-dnd-fonts
+    npm pack solbera-dnd-fonts && tar xf solbera-dnd-fonts-*.tgz
+
+The structure of the distribution package:
+
+    dist
+    ├── Bookinsanity.woff2
+    ├── Bookinsanity Bold.woff2
+    ├── Bookinsanity Italic.woff2
+    ├── Bookinsanity Bold Italic.woff2
+    ├── ... and the rest of the formats eot, otf, svg, ttf, woff
+    ├── Bookinsanity.css
+    └── ... and the rest of fonts
+
 The following table contains names and usage details:
 
 | Original Font          | Solbera's/Ners' Font         | [Usage](http://taxidermicowlbear.weebly.com/dd-fonts.html) |

build/css/Bookinsanity.css

@@ -0,0 +1,55 @@
+@font-face {
+    font-family: "Bookinsanity";
+    src: url("Bookinsanity.eot");
+    src: local("Bookinsanity Remake"),
+         local("Bookinsanity"),
+         url("Bookinsanity.eot?#iefix") format("embedded-opentype"),
+         url("Bookinsanity.woff2") format("woff2"),
+         url("Bookinsanity.woff") format("woff"),
+         url("Bookinsanity.ttf") format("ttf"),
+         url("Bookinsanity.otf") format("opentype"),
+         url("Bookinsanity.svg#BookinsanityRemakeRegular") format("svg");
+}
+
+@font-face {
+    font-family: "Bookinsanity";
+    src: url("Bookinsanity Bold.eot");
+    src: local("Bookinsanity Remake"),
+         local("Bookinsanity"),
+         url("Bookinsanity Bold.eot?#iefix") format("embedded-opentype"),
+         url("Bookinsanity Bold.woff2") format("woff2"),
+         url("Bookinsanity Bold.woff") format("woff"),
+         url("Bookinsanity Bold.ttf") format("ttf"),
+         url("Bookinsanity Bold.otf") format("opentype"),
+         url("Bookinsanity Bold.svg#BookinsanityRemakeBold") format("svg");
+    font-weight: bold;
+}
+
+@font-face {
+    font-family: "Bookinsanity";
+    src: url("Bookinsanity Italic.eot");
+    src: local("Bookinsanity Remake"),
+         local("Bookinsanity"),
+         url("Bookinsanity Italic.eot?#iefix") format("embedded-opentype"),
+         url("Bookinsanity Italic.woff2") format("woff2"),
+         url("Bookinsanity Italic.woff") format("woff"),
+         url("Bookinsanity Italic.ttf") format("ttf"),
+         url("Bookinsanity Italic.otf") format("opentype"),
+         url("Bookinsanity Italic.svg#BookinsanityRemakeItalic") format("svg");
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "Bookinsanity";
+    src: url("Bookinsanity Bold Italic.eot");
+    src: local("Bookinsanity Remake"),
+         local("Bookinsanity"),
+         url("Bookinsanity Bold Italic.eot?#iefix") format("embedded-opentype"),
+         url("Bookinsanity Bold Italic.woff2") format("woff2"),
+         url("Bookinsanity Bold Italic.woff") format("woff"),
+         url("Bookinsanity Bold Italic.ttf") format("ttf"),
+         url("Bookinsanity Bold Italic.otf") format("opentype"),
+         url("Bookinsanity Bold Italic.svg#BookinsanityRemakeSmbldItlc") format("svg");
+    font-style: italic;
+    font-weight: bold;
+}

build/css/Dungeon Drop Case.css

@@ -0,0 +1,11 @@
+@font-face {
+    font-family: "Dungeon Drop Case";
+    src: url("Dungeon Drop Case.eot");
+    src: local("Dungeon Drop Case"),
+         url("Dungeon Drop Case.eot?#iefix") format("embedded-opentype"),
+         url("Dungeon Drop Case.woff2") format("woff2"),
+         url("Dungeon Drop Case.woff") format("woff"),
+         url("Dungeon Drop Case.ttf") format("ttf"),
+         url("Dungeon Drop Case.otf") format("opentype"),
+         url("Dungeon Drop Case.svg#DungeonDropCaseRegular") format("svg");
+}

build/css/Mr Eaves Small Caps.css

@@ -0,0 +1,12 @@
+@font-face {
+    font-family: "Mr Eaves Small Caps";
+    src: url("Mr Eaves Small Caps.eot");
+    src: local("Mr Eaves Small Caps"),
+         url("Mr Eaves Small Caps.eot?#iefix") format("embedded-opentype"),
+         url("Mr Eaves Small Caps.woff2") format("woff2"),
+         url("Mr Eaves Small Caps.woff") format("woff"),
+         url("Mr Eaves Small Caps.ttf") format("ttf"),
+         url("Mr Eaves Small Caps.otf") format("opentype"),
+         url("Mr Eaves Small Caps.svg#MrEavesSCRemakeMedium") format("svg");
+    font-feature-settings: "smcp" on;
+}

build/css/Nodesto Caps Condensed.css

@@ -0,0 +1,51 @@
+@font-face {
+    font-family: "Nodesto Caps Condensed";
+    src: url("Nodesto Caps Condensed.eot");
+    src: local("Nodesto Caps Condensed"),
+         url("Nodesto Caps Condensed.eot?#iefix") format("embedded-opentype"),
+         url("Nodesto Caps Condensed.woff2") format("woff2"),
+         url("Nodesto Caps Condensed.woff") format("woff"),
+         url("Nodesto Caps Condensed.ttf") format("ttf"),
+         url("Nodesto Caps Condensed.otf") format("opentype"),
+         url("Nodesto Caps Condensed.svg#NodestoCapsCondensedRegular") format("svg");
+}
+
+@font-face {
+    font-family: "Nodesto Caps Condensed";
+    src: url("Nodesto Caps Condensed Bold.eot");
+    src: local("Nodesto Caps Condensed"),
+         url("Nodesto Caps Condensed Bold.eot?#iefix") format("embedded-opentype"),
+         url("Nodesto Caps Condensed Bold.woff2") format("woff2"),
+         url("Nodesto Caps Condensed Bold.woff") format("woff"),
+         url("Nodesto Caps Condensed Bold.ttf") format("ttf"),
+         url("Nodesto Caps Condensed Bold.otf") format("opentype"),
+         url("Nodesto Caps Condensed Bold.svg#NodestoCapsCondensedBold") format("svg");
+    font-weight: bold;
+}
+
+@font-face {
+    font-family: "Nodesto Caps Condensed";
+    src: url("Nodesto Caps Condensed Italic.eot");
+    src: local("Nodesto Caps Condensed"),
+         url("Nodesto Caps Condensed Italic.eot?#iefix") format("embedded-opentype"),
+         url("Nodesto Caps Condensed Italic.woff2") format("woff2"),
+         url("Nodesto Caps Condensed Italic.woff") format("woff"),
+         url("Nodesto Caps Condensed Italic.ttf") format("ttf"),
+         url("Nodesto Caps Condensed Italic.otf") format("opentype"),
+         url("Nodesto Caps Condensed Italic.svg#NodestoCapsCondensedItalic") format("svg");
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "Nodesto Caps Condensed";
+    src: url("Nodesto Caps Condensed Bold Italic.eot");
+    src: local("Nodesto Caps Condensed"),
+         url("Nodesto Caps Condensed Bold Italic.eot?#iefix") format("embedded-opentype"),
+         url("Nodesto Caps Condensed Bold Italic.woff2") format("woff2"),
+         url("Nodesto Caps Condensed Bold Italic.woff") format("woff"),
+         url("Nodesto Caps Condensed Bold Italic.ttf") format("ttf"),
+         url("Nodesto Caps Condensed Bold Italic.otf") format("opentype"),
+         url("Nodesto Caps Condensed Bold Italic.svg#NodestoCapsCondensedBoldItalic") format("svg");
+    font-style: italic;
+    font-weight: bold;
+}

build/css/Scaly Sans Caps.css

@@ -0,0 +1,51 @@
+@font-face {
+    font-family: "Scaly Sans Caps";
+    src: url("Scaly Sans Caps.eot");
+    src: local("Scaly Sans Caps"),
+         url("Scaly Sans Caps.eot?#iefix") format("embedded-opentype"),
+         url("Scaly Sans Caps.woff2") format("woff2"),
+         url("Scaly Sans Caps.woff") format("woff"),
+         url("Scaly Sans Caps.ttf") format("ttf"),
+         url("Scaly Sans Caps.otf") format("opentype"),
+         url("Scaly Sans Caps.svg#ScalySansCaps") format("svg");
+}
+
+@font-face {
+    font-family: "Scaly Sans Caps";
+    src: url("Scaly Sans Caps Bold.eot");
+    src: local("Scaly Sans Caps"),
+         url("Scaly Sans Caps Bold.eot?#iefix") format("embedded-opentype"),
+         url("Scaly Sans Caps Bold.woff2") format("woff2"),
+         url("Scaly Sans Caps Bold.woff") format("woff"),
+         url("Scaly Sans Caps Bold.ttf") format("ttf"),
+         url("Scaly Sans Caps Bold.otf") format("opentype"),
+         url("Scaly Sans Caps Bold.svg#ScalySansCaps-Bold") format("svg");
+    font-weight: bold;
+}
+
+@font-face {
+    font-family: "Scaly Sans Caps";
+    src: url("Scaly Sans Caps Italic.eot");
+    src: local("Scaly Sans Caps"),
+         url("Scaly Sans Caps Italic.eot?#iefix") format("embedded-opentype"),
+         url("Scaly Sans Caps Italic.woff2") format("woff2"),
+         url("Scaly Sans Caps Italic.woff") format("woff"),
+         url("Scaly Sans Caps Italic.ttf") format("ttf"),
+         url("Scaly Sans Caps Italic.otf") format("opentype"),
+         url("Scaly Sans Caps Italic.svg#ScalySansCaps-Italic") format("svg");
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "Scaly Sans Caps";
+    src: url("Scaly Sans Caps Bold Italic.eot");
+    src: local("Scaly Sans Caps"),
+         url("Scaly Sans Caps Bold Italic.eot?#iefix") format("embedded-opentype"),
+         url("Scaly Sans Caps Bold Italic.woff2") format("woff2"),
+         url("Scaly Sans Caps Bold Italic.woff") format("woff"),
+         url("Scaly Sans Caps Bold Italic.ttf") format("ttf"),
+         url("Scaly Sans Caps Bold Italic.otf") format("opentype"),
+         url("Scaly Sans Caps Bold Italic.svg#ScalySansCaps-BoldItalic") format("svg");
+    font-style: italic;
+    font-weight: bold;
+}

build/css/Scaly Sans.css

@@ -0,0 +1,51 @@
+@font-face {
+    font-family: "Scaly Sans";
+    src: url("Scaly Sans.eot");
+    src: local("Scaly Sans"),
+         url("Scaly Sans.eot?#iefix") format("embedded-opentype"),
+         url("Scaly Sans.woff2") format("woff2"),
+         url("Scaly Sans.woff") format("woff"),
+         url("Scaly Sans.ttf") format("ttf"),
+         url("Scaly Sans.otf") format("opentype"),
+         url("Scaly Sans.svg#ScalySansRemakeRegular") format("svg");
+}
+
+@font-face {
+    font-family: "Scaly Sans";
+    src: url("Scaly Sans Bold.eot");
+    src: local("Scaly Sans"),
+         url("Scaly Sans Bold.eot?#iefix") format("embedded-opentype"),
+         url("Scaly Sans Bold.woff2") format("woff2"),
+         url("Scaly Sans Bold.woff") format("woff"),
+         url("Scaly Sans Bold.ttf") format("ttf"),
+         url("Scaly Sans Bold.otf") format("opentype"),
+         url("Scaly Sans Bold.svg#ScalySansRemakeBold") format("svg");
+    font-weight: bold;
+}
+
+@font-face {
+    font-family: "Scaly Sans";
+    src: url("Scaly Sans Italic.eot");
+    src: local("Scaly Sans"),
+         url("Scaly Sans Italic.eot?#iefix") format("embedded-opentype"),
+         url("Scaly Sans Italic.woff2") format("woff2"),
+         url("Scaly Sans Italic.woff") format("woff"),
+         url("Scaly Sans Italic.ttf") format("ttf"),
+         url("Scaly Sans Italic.otf") format("opentype"),
+         url("Scaly Sans Italic.svg#ScalySansRemakeItalic") format("svg");
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "Scaly Sans";
+    src: url("Scaly Sans Bold Italic.eot");
+    src: local("Scaly Sans"),
+         url("Scaly Sans Bold Italic.eot?#iefix") format("embedded-opentype"),
+         url("Scaly Sans Bold Italic.woff2") format("woff2"),
+         url("Scaly Sans Bold Italic.woff") format("woff"),
+         url("Scaly Sans Bold Italic.ttf") format("ttf"),
+         url("Scaly Sans Bold Italic.otf") format("opentype"),
+         url("Scaly Sans Bold Italic.svg#ScalySansRemakeBoldItalic") format("svg");
+    font-style: italic;
+    font-weight: bold;
+}

build/css/Solbera Imitation.css

@@ -0,0 +1,11 @@
+@font-face {
+    font-family: "Solbera Imitation";
+    src: url("Solbera Imitation.eot");
+    src: local("Solbera Imitation"),
+         url("Solbera Imitation.eot?#iefix") format("embedded-opentype"),
+         url("Solbera Imitation.woff2") format("woff2"),
+         url("Solbera Imitation.woff") format("woff"),
+         url("Solbera Imitation.ttf") format("ttf"),
+         url("Solbera Imitation.otf") format("opentype"),
+         url("Solbera Imitation.svg#SolberaImitation") format("svg");
+}

build/css/Zatanna Misdirection.css

@@ -0,0 +1,55 @@
+@font-face {
+    font-family: "Zatanna Misdirection";
+    src: url("Zatanna Misdirection.eot");
+    src: local("Zatanna Misdirection Remake"),
+         local("Zatanna Misdirection"),
+         url("Zatanna Misdirection.eot?#iefix") format("embedded-opentype"),
+         url("Zatanna Misdirection.woff2") format("woff2"),
+         url("Zatanna Misdirection.woff") format("woff"),
+         url("Zatanna Misdirection.ttf") format("ttf"),
+         url("Zatanna Misdirection.otf") format("opentype"),
+         url("Zatanna Misdirection.svg#ZatannaMisdirection") format("svg");
+}
+
+@font-face {
+    font-family: "Zatanna Misdirection";
+    src: url("Zatanna Misdirection Bold.eot");
+    src: local("Zatanna Misdirection Remake"),
+         local("Zatanna Misdirection"),
+         url("Zatanna Misdirection Bold.eot?#iefix") format("embedded-opentype"),
+         url("Zatanna Misdirection Bold.woff2") format("woff2"),
+         url("Zatanna Misdirection Bold.woff") format("woff"),
+         url("Zatanna Misdirection Bold.ttf") format("ttf"),
+         url("Zatanna Misdirection Bold.otf") format("opentype"),
+         url("Zatanna Misdirection Bold.svg#ZatannaMisdirection-Bold") format("svg");
+    font-weight: bold;
+}
+
+@font-face {
+    font-family: "Zatanna Misdirection";
+    src: url("Zatanna Misdirection Italic.eot");
+    src: local("Zatanna Misdirection Remake"),
+         local("Zatanna Misdirection"),
+         url("Zatanna Misdirection Italic.eot?#iefix") format("embedded-opentype"),
+         url("Zatanna Misdirection Italic.woff2") format("woff2"),
+         url("Zatanna Misdirection Italic.woff") format("woff"),
+         url("Zatanna Misdirection Italic.ttf") format("ttf"),
+         url("Zatanna Misdirection Italic.otf") format("opentype"),
+         url("Zatanna Misdirection Italic.svg#ZatannaMisdirection-Italic") format("svg");
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "Zatanna Misdirection";
+    src: url("Zatanna Misdirection Bold Italic.eot");
+    src: local("Zatanna Misdirection Remake"),
+         local("Zatanna Misdirection"),
+         url("Zatanna Misdirection Bold Italic.eot?#iefix") format("embedded-opentype"),
+         url("Zatanna Misdirection Bold Italic.woff2") format("woff2"),
+         url("Zatanna Misdirection Bold Italic.woff") format("woff"),
+         url("Zatanna Misdirection Bold Italic.ttf") format("ttf"),
+         url("Zatanna Misdirection Bold Italic.otf") format("opentype"),
+         url("Zatanna Misdirection Bold Italic.svg#ZatannaMisdirection-BoldItalic") format("svg");
+    font-style: italic;
+    font-weight: bold;
+}

build/generate.js

@@ -0,0 +1,23 @@
+import { readdir, readFile, writeFile } from 'node:fs/promises'
+import fontfacegen from 'fontfacegen'
+
+// Read all otf font file names
+const fontFiles = await readdir('dist') // all files are *.otf
+
+// If a new font is added, let initial stylesheets be generated
+const { argv, env } = process
+const css = 'NO_COLOR' in env || argv.includes('--css')
+
+// Generate other font formats
+for (const fontFile of fontFiles) {
+  if (!fontFile.endsWith('.otf')) continue
+  console.log(`${fontFile}\n`)
+  fontfacegen({ source: `dist/${fontFile}`, dest: 'dist', css })
+  console.log()
+}
+
+// Update paths in the complete stylesheet
+console.log('stylesheet.css')
+let stylesheet = await readFile('stylesheet.css', 'utf8')
+stylesheet = stylesheet.replace(/\burl\("([^"]+)"\)/g, 'url("dist/$1")')
+await writeFile('stylesheet.css', stylesheet)

build/test.js

@@ -0,0 +1,23 @@
+import test from 'node:test'
+import { strictEqual } from 'node:assert'
+import 'untap-inprocess'
+
+import { readdir } from 'node:fs/promises'
+
+const all = await readdir('dist')
+const css = all.filter(font => font.endsWith('.css'))
+
+test('otf format was copied', () => {
+  const otf = all.filter(font => font.endsWith('.otf'))
+  strictEqual(otf.length, 23)
+})
+
+test('stylesheets were written', () => {
+  strictEqual(css.length, 8)
+})
+
+test('all formats were generated', () => {
+  const otf = all.filter(font => font.endsWith('.otf'))
+  // css + eot, svg, otf, ttf, woff, woff2 
+  strictEqual(all.length, otf.length * 6 + css.length)
+})

index.html

@@ -256,7 +256,7 @@ <h1>Solbera's DND 5e Fonts</h1>
 		font-family: "Mr Eaves Small Caps";
 		src: 
 			local("Mr Eaves Small Caps"),
-			url("./Mr Eaves/Mr Eaves Small Caps.otf"),
+			url("./Mr Eaves Small Caps/Mr Eaves Small Caps.otf"),
 			url("https://raw.githubusercontent.com/jonathonf/solbera-dnd-fonts/master/Mr%20Eaves/Mr%20Eaves%20Small%20Caps.otf") format("opentype");
 		font-feature-settings: "smcp" on;
 	}