search

Munter / subfont

Command line tool to optimize your webfont loading. Aggressive subsetting based on your font use, self-hosting of Google fonts and preloading
MIT License
1.56k stars 29 forks source link

Font family name does not match with font path #131

Closed ghost closed 3 years ago

ghost commented 3 years ago

Subfont version: 5.2.3.

Subfont command: subfont index.html -o ./ -r

initial index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, shrink-to-fit=no"
    />
    <title>debug_subfont</title>
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Alice"
    />
    <link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css" />
  </head>

  <body class="text-center">
    <h1 style="font-family: Alice, serif">
      Christmas Images - Adorable boy with a dog
    </h1>
    <a
      class="d-block"
      href="https://thegraphicsfairy.com/vintage-christmas-image-boy-snow/"
      >https://thegraphicsfairy.com/vintage-christmas-image-boy-snow/</a
    ><img
      src="assets/img/Free-Christmas-Picture-Boy-Dog-GraphicsFairy-658x1024.jpg"
      style="height: 600px"
    /><a class="d-block" href="about.html">About</a>
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>

initial about.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>debug_subfont</title>
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Alice">
    <link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css">
</head>

<body>
    <h1><i class="far fa-star"></i>About us</h1>
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

result index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, shrink-to-fit=no"
    />
    <title>debug_subfont</title>
    <link
      rel="preload"
      as="font"
      type="font/woff2"
      crossorigin="anonymous"
      href="/subfont/Alice-400-ab52a3064c.woff2"
    />
    <script>
      try {
        new FontFace(
          "Alice__subset",
          "url(/subfont/Alice-400-ab52a3064c.woff2) format('woff2')",
          {}
        ).load();
      } catch (e) {}
    </script>
    <link rel="stylesheet" href="/subfont/fonts-864359b657.css" />
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css" />

    <link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css" />
  </head>

  <body class="text-center">
    <h1 style="font-family: Alice__subset, Alice, serif">
      Christmas Images - Adorable boy with a dog
    </h1>
    <a
      class="d-block"
      href="https://thegraphicsfairy.com/vintage-christmas-image-boy-snow/"
      >https://thegraphicsfairy.com/vintage-christmas-image-boy-snow/</a
    ><img
      src="assets/img/Free-Christmas-Picture-Boy-Dog-GraphicsFairy-658x1024.jpg"
      style="height: 600px"
    /><a class="d-block" href="about.html">About</a>
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>

    <script>
      !(function () {
        var el = document.createElement("link");
        (el.href = "/subfont/fallback-e995debd67.css"),
          (el.rel = "stylesheet"),
          document.body.appendChild(el);
      })();
    </script>
    <noscript
      ><link rel="stylesheet" href="/subfont/fallback-e995debd67.css"
    /></noscript>
    <script>
      !(function () {
        var el = document.createElement("link");
        (el.href = "/subfont/fallback-94148c0c6e.css"),
          (el.rel = "stylesheet"),
          document.body.appendChild(el);
      })();
    </script>
    <noscript
      ><link rel="stylesheet" href="/subfont/fallback-94148c0c6e.css"
    /></noscript>
  </body>
</html>

result about.html (here's the problem)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, shrink-to-fit=no"
    />
    <title>debug_subfont</title>
    <link
      rel="preload"
      as="font"
      type="font/woff2"
      crossorigin="anonymous"
      href="/subfont/Font_Awesome_5_Free-400-677a1edd21.woff2"
    />
    <script>
      try {
        new FontFace(
          "Font Awesome 5 Free__subset",
          "url(/subfont/Alice-400-ab52a3064c.woff2) format('woff2')", <--- Here
          {}
        ).load();
      } catch (e) {}
    </script>
    <link rel="stylesheet" href="/subfont/fonts-864359b657.css" />
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css" />

    <link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css" />
  </head>

  <body>
    <h1><i class="far fa-star"></i>About us</h1>
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>

    <script>
      !(function () {
        var el = document.createElement("link");
        (el.href = "/subfont/fallback-e995debd67.css"),
          (el.rel = "stylesheet"),
          document.body.appendChild(el);
      })();
    </script>
    <noscript
      ><link rel="stylesheet" href="/subfont/fallback-e995debd67.css"
    /></noscript>
    <script>
      !(function () {
        var el = document.createElement("link");
        (el.href = "/subfont/fallback-94148c0c6e.css"),
          (el.rel = "stylesheet"),
          document.body.appendChild(el);
      })();
    </script>
    <noscript
      ><link rel="stylesheet" href="/subfont/fallback-94148c0c6e.css"
    /></noscript>
  </body>
</html>

As you can see subfont generated a preload script the font families of which do not match the correct font url:

resulting about.html

<script>
  try {
    new FontFace(
      "Font Awesome 5 Free__subset",
      "url(/subfont/Alice-400-ab52a3064c.woff2) format('woff2')",
      {}
    ).load();
  } catch (e) {}
</script>

In this case it matched font awesome with the Alice subset font file.

It also created two fallback font files (one for font awesome and the other for Alice font) and I' not sure that's the desired outcome because of the additional requests. How can I get subfont to generate one fallback file only?

resulting about.html

<script>
  !(function () {
    var el = document.createElement("link");
    (el.href = "/subfont/fallback-e995debd67.css"),
      (el.rel = "stylesheet"),
      document.body.appendChild(el);
  })();
</script>
<noscript
  ><link rel="stylesheet" href="/subfont/fallback-e995debd67.css"
/></noscript>
<script>
  !(function () {
    var el = document.createElement("link");
    (el.href = "/subfont/fallback-94148c0c6e.css"),
      (el.rel = "stylesheet"),
      document.body.appendChild(el);
  })();
</script>
<noscript
  ><link rel="stylesheet" href="/subfont/fallback-94148c0c6e.css"
/></noscript>

As you can see subfont generated fallback files fallback-e995debd67.css and fallback-94148c0c6e.css.

subfont command output:


Guessing --root from input files: file:///home/user/html_project/
 ✔ 0.001 secs: logEvents
(node:66489) Warning: a promise was created in a handler at internal/timers.js:458:21 but was not returned from it, see http://goo.gl/rRqMUw
    at new Promise (/home/user/.config/yarn/global/node_modules/bluebird/js/release/promise.js:103:10)
(Use `node --trace-warnings ...` to show where the warning was created)
 ✔ 0.086 secs: loadAssets
(node:66489) Warning: a promise was created in a handler at internal/timers.js:458:21 but was not returned from it, see http://goo.gl/rRqMUw
    at new Promise (/home/user/.config/yarn/global/node_modules/bluebird/js/release/promise.js:103:10)
(node:66489) Warning: a promise was created in a handler at internal/timers.js:458:21 but was not returned from it, see http://goo.gl/rRqMUw
    at new Promise (/home/user/.config/yarn/global/node_modules/bluebird/js/release/promise.js:103:10)
(node:66489) Warning: a promise was created in a handler at internal/timers.js:458:21 but was not returned from it, see http://goo.gl/rRqMUw
    at new Promise (/home/user/.config/yarn/global/node_modules/bluebird/js/release/promise.js:103:10)
(node:66489) Warning: a promise was created in a handler at internal/timers.js:458:21 but was not returned from it, see http://goo.gl/rRqMUw
    at new Promise (/home/user/.config/yarn/global/node_modules/bluebird/js/release/promise.js:103:10)
(node:66489) Warning: a promise was created in a handler at internal/timers.js:458:21 but was not returned from it, see http://goo.gl/rRqMUw
    at new Promise (/home/user/.config/yarn/global/node_modules/bluebird/js/release/promise.js:103:10)
(node:66489) Warning: a promise was created in a handler at internal/timers.js:458:21 but was not returned from it, see http://goo.gl/rRqMUw
    at new Promise (/home/user/.config/yarn/global/node_modules/bluebird/js/release/promise.js:103:10)
(node:66489) Warning: a promise was created in a handler at internal/timers.js:458:21 but was not returned from it, see http://goo.gl/rRqMUw
    at new Promise (/home/user/.config/yarn/global/node_modules/bluebird/js/release/promise.js:103:10)
(node:66489) Warning: a promise was created in a handler at internal/timers.js:458:21 but was not returned from it, see http://goo.gl/rRqMUw
    at new Promise (/home/user/.config/yarn/global/node_modules/bluebird/js/release/promise.js:103:10)
(node:66489) Warning: a promise was created in a handler at internal/timers.js:458:21 but was not returned from it, see http://goo.gl/rRqMUw
    at new Promise (/home/user/.config/yarn/global/node_modules/bluebird/js/release/promise.js:103:10)
(node:66489) Warning: a promise was created in a handler at internal/timers.js:458:21 but was not returned from it, see http://goo.gl/rRqMUw
    at new Promise (/home/user/.config/yarn/global/node_modules/bluebird/js/release/promise.js:103:10)
(node:66489) Warning: a promise was created in a handler at internal/timers.js:458:21 but was not returned from it, see http://goo.gl/rRqMUw
    at new Promise (/home/user/.config/yarn/global/node_modules/bluebird/js/release/promise.js:103:10)
(node:66489) Warning: a promise was created in a handler at internal/timers.js:458:21 but was not returned from it, see http://goo.gl/rRqMUw
    at new Promise (/home/user/.config/yarn/global/node_modules/bluebird/js/release/promise.js:103:10)
(node:66489) Warning: a promise was created in a handler at internal/timers.js:458:21 but was not returned from it, see http://goo.gl/rRqMUw
    at new Promise (/home/user/.config/yarn/global/node_modules/bluebird/js/release/promise.js:103:10)
(node:66489) Warning: a promise was created in a handler at internal/timers.js:458:21 but was not returned from it, see http://goo.gl/rRqMUw
    at new Promise (/home/user/.config/yarn/global/node_modules/bluebird/js/release/promise.js:103:10)
(node:66489) Warning: a promise was created in a handler at internal/timers.js:458:21 but was not returned from it, see http://goo.gl/rRqMUw
    at new Promise (/home/user/.config/yarn/global/node_modules/bluebird/js/release/promise.js:103:10)
 ✔ 1.918 secs: populate
 ✔ 0.012 secs: checkIncompatibleTypes
 ✔ 0.001 secs: applySourceMaps
 ✔ 0.002 secs: populate
 ✔ 0.009 secs: populate
 ⚠ WARN: https://fonts.gstatic.com/s/alice/v12/OpNCnoEEmtHa6GcOrgs.ttf - Command failed: pyftsubset /tmp/input-120113-66489-3-1axdhyr.egd9g.woff --output-file=/tmp/output-120113-66489-4-6cfoco.ovh5r.woff --obfuscate_names --text=" -ACIabdeghilmorstwy" --with-zopfli --flavor=woff
         Traceback (most recent call last):
           File "/home/user/.local/bin/pyftsubset", line 8, in <module>
             sys.exit(main())
           File "/home/user/.local/lib/python2.7/site-packages/fontTools/misc/loggingTools.py", line 375, in wrapper
             return func(*args, **kwds)
           File "/home/user/.local/lib/python2.7/site-packages/fontTools/subset/__init__.py", line 2881, in main
             save_font(font, outfile, options)
           File "/home/user/.local/lib/python2.7/site-packages/fontTools/misc/loggingTools.py", line 375, in wrapper
             return func(*args, **kwds)
           File "/home/user/.local/lib/python2.7/site-packages/fontTools/subset/__init__.py", line 2728, in save_font
             font.save(outfile, reorderTables=options.canonical_order)
           File "/home/user/.local/lib/python2.7/site-packages/fontTools/ttLib/ttFont.py", line 173, in save
             writer_reordersTables = self._save(tmp)
           File "/home/user/.local/lib/python2.7/site-packages/fontTools/ttLib/ttFont.py", line 212, in _save
             self._writeTable(tag, writer, done, tableCache)
           File "/home/user/.local/lib/python2.7/site-packages/fontTools/ttLib/ttFont.py", line 629, in _writeTable
             self._writeTable(masterTable, writer, done, tableCache)
           File "/home/user/.local/lib/python2.7/site-packages/fontTools/ttLib/ttFont.py", line 629, in _writeTable
             self._writeTable(masterTable, writer, done, tableCache)
           File "/home/user/.local/lib/python2.7/site-packages/fontTools/ttLib/ttFont.py", line 641, in _writeTable
             writer[tag] = tabledata
           File "/home/user/.local/lib/python2.7/site-packages/fontTools/ttLib/sfnt.py", line 264, in __setitem__
             entry.saveData(self.file, data)
           File "/home/user/.local/lib/python2.7/site-packages/fontTools/ttLib/sfnt.py", line 486, in saveData
             data = self.encodeData(data)
           File "/home/user/.local/lib/python2.7/site-packages/fontTools/ttLib/sfnt.py", line 531, in encodeData
             compressedData = compress(data, self.zlibCompressionLevel)
           File "/home/user/.local/lib/python2.7/site-packages/fontTools/ttLib/sfnt.py", line 187, in compress
             from zopfli.zlib import compress
         ImportError: No module named zopfli.zlib

         Including assets:
             https://fonts.googleapis.com/css?family=Alice

 ⚠ WARN: assets/fonts/fa-regular-400.woff2 - Command failed: pyftsubset /tmp/input-120113-66489-7-122iuo7.uwta.woff --output-file=/tmp/output-120113-66489-8-15xb9wv.b
```u5m.woff --obfuscate_names --text="" --with-zopfli --flavor=woff
         WARNING: FFTM NOT subset; don't know how to subset; dropped
         Traceback (most recent call last):
           File "/home/user/.local/bin/pyftsubset", line 8, in <module>
             sys.exit(main())
           File "/home/user/.local/lib/python2.7/site-packages/fontTools/misc/loggingTools.py", line 375, in wrapper
             return func(*args, **kwds)
           File "/home/user/.local/lib/python2.7/site-packages/fontTools/subset/__init__.py", line 2881, in main
             save_font(font, outfile, options)
           File "/home/user/.local/lib/python2.7/site-packages/fontTools/misc/loggingTools.py", line 375, in wrapper
             return func(*args, **kwds)
           File "/home/user/.local/lib/python2.7/site-packages/fontTools/subset/__init__.py", line 2728, in save_font
             font.save(outfile, reorderTables=options.canonical_order)
           File "/home/user/.local/lib/python2.7/site-packages/fontTools/ttLib/ttFont.py", line 173, in save
             writer_reordersTables = self._save(tmp)
           File "/home/user/.local/lib/python2.7/site-packages/fontTools/ttLib/ttFont.py", line 212, in _save
             self._writeTable(tag, writer, done, tableCache)
           File "/home/user/.local/lib/python2.7/site-packages/fontTools/ttLib/ttFont.py", line 629, in _writeTable
             self._writeTable(masterTable, writer, done, tableCache)
           File "/home/user/.local/lib/python2.7/site-packages/fontTools/ttLib/ttFont.py", line 629, in _writeTable
             self._writeTable(masterTable, writer, done, tableCache)
           File "/home/user/.local/lib/python2.7/site-packages/fontTools/ttLib/ttFont.py", line 641, in _writeTable
             writer[tag] = tabledata
           File "/home/user/.local/lib/python2.7/site-packages/fontTools/ttLib/sfnt.py", line 264, in __setitem__
             entry.saveData(self.file, data)
           File "/home/user/.local/lib/python2.7/site-packages/fontTools/ttLib/sfnt.py", line 486, in saveData
             data = self.encodeData(data)
           File "/home/user/.local/lib/python2.7/site-packages/fontTools/ttLib/sfnt.py", line 531, in encodeData
             compressedData = compress(data, self.zlibCompressionLevel)
           File "/home/user/.local/lib/python2.7/site-packages/fontTools/ttLib/sfnt.py", line 187, in compress
             from zopfli.zlib import compress
         ImportError: No module named zopfli.zlib

         Including assets:
             assets/fonts/fontawesome-all.min.css

(node:66489) Warning: a promise was created in a handler at internal/timers.js:458:21 but was not returned from it, see http://goo.gl/rRqMUw
    at new Promise (/home/user/.config/yarn/global/node_modules/bluebird/js/release/promise.js:103:10)
(node:66489) Warning: a promise was created in a handler at internal/timers.js:458:21 but was not returned from it, see http://goo.gl/rRqMUw
    at new Promise (/home/user/.config/yarn/global/node_modules/bluebird/js/release/promise.js:103:10)
(node:66489) Warning: a promise was created in a handler at internal/timers.js:458:21 but was not returned from it, see http://goo.gl/rRqMUw
    at new Promise (/home/user/.config/yarn/global/node_modules/bluebird/js/release/promise.js:103:10)
(node:66489) Warning: a promise was created in a handler at internal/timers.js:458:21 but was not returned from it, see http://goo.gl/rRqMUw
    at new Promise (/home/user/.config/yarn/global/node_modules/bluebird/js/release/promise.js:103:10)
 ✔ 0.000 secs: serializeSourceMaps
 ✔ 0.074 secs: compressJavaScript
 ✔ 0.013 secs: writeAssetsToDisc
index.html: 2 fonts (2 variants) in use, 75 kB total. Created subsets: 6.03 kB total
  Alice:
    400 : 20/215 codepoints used, 61.4 kB (ttf) => 5.54 kB (woff2)
  Font Awesome 5 Free:
    400 :  2/152 codepoints used (1 on this page), 13.6 kB (woff2) => 492 B (woff2)
about.html: 2 fonts (2 variants) in use, 75 kB total. Created subsets: 6.03 kB total
  Alice:
    400 : 20/215 codepoints used (1 on this page), 61.4 kB (ttf) => 5.54 kB (woff2)
  Font Awesome 5 Free:
    400 :  2/152 codepoints used, 13.6 kB (woff2) => 492 B (woff2)
HTML/JS/CSS size increase: 2.77 kB
Total savings: 135 kB
Output written to file:///home/user/html_project/
papandreou commented 3 years ago

I've tried to recreate your test case by downloading some version of font-awesome and bootstrap. I don't get exactly the same result as you, but I see the creation of the JavaScript-based preload polyfill produce another broken result. I think I see what the problem is, but it looks like it needs to be rewritten to be able to match things up correctly.

In the mean time, could you use subfont --browsers 'chrome>=50' to disable it?

papandreou commented 3 years ago

Fixed in 5.2.5 😌

ghost commented 3 years ago

Thanks a lot!