Move fonts from typeface to fontsource

Author: Felix Hennig

gulp.d/tasks/build.js

@@ -37,7 +37,7 @@ module.exports = (src, dest, preview) => () => {
       }),
     postcssUrl([
       {
-        filter: '**/~typeface-*/files/*',
+        filter: '**/~@fontsource/*/files/*',
         url: (asset) => {
           const relpath = asset.pathname.substr(1)
           const abspath = require.resolve(relpath)

package-lock.json

@@ -21,6 +21,9 @@
   "devDependencies": {
     "@asciidoctor/core": "~2.2",
     "@asciidoctor/tabs": "^1.0.0-beta.6",
+    "@fontsource/ibm-plex-mono": "^5.0.14",
+    "@fontsource/noto-sans": "^5.0.22",
+    "@fontsource/roboto-mono": "^5.0.19",
     "autoprefixer": "^10.4",
     "browser-pack-flat": "^3.4",
     "browserify": "^17.0",
@@ -60,9 +63,5 @@
     "typeface-roboto-mono": "1.1.13",
     "vinyl-buffer": "^1.0",
     "vinyl-fs": "^3.0"
-  },
-  "dependencies": {
-    "typeface-ibm-plex-mono": "^1.1.13",
-    "typeface-noto-sans": "^1.1.13"
   }
 }

package.json

@@ -0,0 +1,17 @@
+@font-face {
+  font-family: "IBM Plex Mono";
+  font-style: normal;
+  font-weight: 400;
+  src:
+    url(~@fontsource/ibm-plex-mono/files/ibm-plex-mono-latin-400-normal.woff2) format("woff2"),
+    url(~@fontsource/ibm-plex-mono/files/ibm-plex-mono-latin-400-normal.woff) format("woff");
+}
+
+@font-face {
+  font-family: "IBM Plex Mono";
+  font-style: normal;
+  font-weight: 600;
+  src:
+    url(~@fontsource/ibm-plex-mono/files/ibm-plex-mono-latin-600-normal.woff2) format("woff2"),
+    url(~@fontsource/ibm-plex-mono/files/ibm-plex-mono-latin-600-normal.woff) format("woff");
+}

src/css/fontsource-ibm-plex-mono.css

@@ -0,0 +1,21 @@
+@font-face {
+  font-family: "Noto Sans";
+  font-style: normal;
+  font-weight: 400;
+  src:
+    local("Roboto Mono Regular"),
+    local("RobotoMono-Regular"),
+    url(~@fontsource/noto-sans/files/noto-sans-latin-400-normal.woff2) format("woff2"),
+    url(~@fontsource/noto-sans/files/noto-sans-latin-400-normal.woff) format("woff");
+}
+
+@font-face {
+  font-family: "Noto Sans";
+  font-style: normal;
+  font-weight: 700;
+  src:
+    local("Roboto Mono Medium"),
+    local("RobotoMono-Medium"),
+    url(~@fontsource/noto-sans/files/noto-sans-latin-700-normal.woff2) format("woff2"),
+    url(~@fontsource/noto-sans/files/noto-sans-latin-700-normal.woff) format("woff");
+}

src/css/fontsource-noto-sans.css

@@ -0,0 +1,21 @@
+@font-face {
+  font-family: "Roboto Mono";
+  font-style: normal;
+  font-weight: 400;
+  src:
+    local("Roboto Mono Regular"),
+    local("RobotoMono-Regular"),
+    url(~@fontsource/roboto-mono/files/roboto-mono-latin-400-normal.woff2) format("woff2"),
+    url(~@fontsource/roboto-mono/files/roboto-mono-latin-400-normal.woff) format("woff");
+}
+
+@font-face {
+  font-family: "Roboto Mono";
+  font-style: normal;
+  font-weight: 500;
+  src:
+    local("Roboto Mono Medium"),
+    local("RobotoMono-Medium"),
+    url(~@fontsource/roboto-mono/files/roboto-mono-latin-500-normal.woff2) format("woff2"),
+    url(~@fontsource/roboto-mono/files/roboto-mono-latin-500-normal.woff) format("woff");
+}

src/css/fontsource-roboto-mono.css

@@ -1,7 +1,7 @@
 
-@import "typeface-noto-sans.css";
-@import "typeface-ibm-plex-mono.css";
-@import "typeface-roboto-mono.css";
+@import "fontsource-noto-sans.css";
+@import "fontsource-ibm-plex-mono.css";
+@import "fontsource-roboto-mono.css";
 @import "vars.css";
 @import "base.css";
 @import "body.css";