switch from deprecated typeface- packages to fontsource packages to retrieve fonts; use more liberal filter

Author: mojavelinux

gulp.d/tasks/build.js

@@ -38,7 +38,7 @@ module.exports = (src, dest, preview) => () => {
       }),
     postcssUrl([
       {
-        filter: '**/~typeface-*/files/*',
+        filter: new RegExp('^src/css/[~][^/]*(?:font|face)[^/]*/.*/files/.+[.](?:ttf|woff2?)$'),
         url: (asset) => {
           const relpath = asset.pathname.substr(1)
           const abspath = require.resolve(relpath)

package-lock.json

@@ -19,6 +19,9 @@
   "devDependencies": {
     "@octokit/rest": "~18.0",
     "@asciidoctor/core": "~2.2",
+    "@fontsource/comfortaa": "~4.5",
+    "@fontsource/roboto": "~4.5",
+    "@fontsource/roboto-mono": "~4.5",
     "autoprefixer": "~10.0",
     "browser-pack-flat": "~3.4",
     "browserify": "~17.0",
@@ -55,9 +58,6 @@
     "require-from-string": "~2.0",
     "stylelint": "~13.8",
     "stylelint-config-standard": "~20.0",
-    "typeface-comfortaa": "^1.1",
-    "typeface-roboto": "^1.1",
-    "typeface-roboto-mono": "^1.1",
     "vinyl-buffer": "~1.0",
     "vinyl-fs": "~3.0"
   }

package.json

@@ -3,8 +3,7 @@
   font-style: normal;
   font-weight: 400;
   src:
-    local("Comfortaa Regular"),
-    local("Comfortaa-Regular"),
-    url(~typeface-comfortaa/files/comfortaa-latin-400.woff2) format("woff2"),
-    url(~typeface-comfortaa/files/comfortaa-latin-400.woff) format("woff");
+    url(~@fontsource/comfortaa/files/comfortaa-latin-400-normal.woff2) format("woff2"),
+    url(~@fontsource/comfortaa/files/comfortaa-latin-400-normal.woff) format("woff");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }

src/css/typeface-comfortaa.css

@@ -3,19 +3,17 @@
   font-style: normal;
   font-weight: 400;
   src:
-    local("Roboto Mono Regular"),
-    local("RobotoMono-Regular"),
-    url(~typeface-roboto-mono/files/roboto-mono-latin-400.woff2) format("woff2"),
-    url(~typeface-roboto-mono/files/roboto-mono-latin-400.woff) format("woff");
+    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");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 @font-face {
   font-family: "Roboto Mono";
   font-style: normal;
   font-weight: 500;
   src:
-    local("Roboto Mono Medium"),
-    local("RobotoMono-Medium"),
-    url(~typeface-roboto-mono/files/roboto-mono-latin-500.woff2) format("woff2"),
-    url(~typeface-roboto-mono/files/roboto-mono-latin-500.woff) format("woff");
+    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");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }

src/css/typeface-roboto-mono.css

@@ -3,41 +3,37 @@
   font-style: normal;
   font-weight: 400;
   src:
-    local("Roboto Regular"),
-    local("Roboto-Regular"),
-    url(~typeface-roboto/files/roboto-latin-400.woff2) format("woff2"),
-    url(~typeface-roboto/files/roboto-latin-400.woff) format("woff");
+    url(~@fontsource/roboto/files/roboto-latin-400-normal.woff2) format("woff2"),
+    url(~@fontsource/roboto/files/roboto-latin-400-normal.woff) format("woff");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 @font-face {
   font-family: "Roboto";
   font-style: italic;
   font-weight: 400;
   src:
-    local("Roboto Italic"),
-    local("Roboto-Italic"),
-    url(~typeface-roboto/files/roboto-latin-400italic.woff2) format("woff2"),
-    url(~typeface-roboto/files/roboto-latin-400italic.woff) format("woff");
+    url(~@fontsource/roboto/files/roboto-latin-400-italic.woff2) format("woff2"),
+    url(~@fontsource/roboto/files/roboto-latin-400-italic.woff) format("woff");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 @font-face {
   font-family: "Roboto";
   font-style: normal;
   font-weight: 500;
   src:
-    local("Roboto Medium"),
-    local("Roboto-Medium"),
-    url(~typeface-roboto/files/roboto-latin-500.woff2) format("woff2"),
-    url(~typeface-roboto/files/roboto-latin-500.woff) format("woff");
+    url(~@fontsource/roboto/files/roboto-latin-500-normal.woff2) format("woff2"),
+    url(~@fontsource/roboto/files/roboto-latin-500-normal.woff) format("woff");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 @font-face {
   font-family: "Roboto";
   font-style: italic;
   font-weight: 500;
   src:
-    local("Roboto Medium Italic"),
-    local("Roboto-MediumItalic"),
-    url(~typeface-roboto/files/roboto-latin-500italic.woff2) format("woff2"),
-    url(~typeface-roboto/files/roboto-latin-500italic.woff) format("woff");
+    url(~@fontsource/roboto/files/roboto-latin-500-italic.woff2) format("woff2"),
+    url(~@fontsource/roboto/files/roboto-latin-500-italic.woff) format("woff");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }