can't convert google font

[pc0124]

garbled fonts using nodejs converter

https://fonts.google.com/specimen/PT+Serif

$ node convert-fonts.mjs ptserif -r ../PTSerif-Regular.ttf -b ../PTSerif-Bold.ttf -i ../PTSerif-Italic.ttf --preview
Converting font family: ptserif
Output directory: .
Font size: 16pt

  Converting: PTSerif-Regular.ttf -> regular.epdfont
  Created: ptserif/regular.epdfont (41110 bytes)                                
  Preview: ptserif/regular.html
  Converting: PTSerif-Bold.ttf -> bold.epdfont
  Created: ptserif/bold.epdfont (44239 bytes)                                   
  Preview: ptserif/bold.html
  Converting: PTSerif-Italic.ttf -> italic.epdfont
  Created: ptserif/italic.epdfont (43358 bytes)                                 
  Preview: ptserif/italic.html

Converted 3/3 fonts

To use this font in your theme, add to your .theme file:

[fonts]
reader_font_small = ptserif
reader_font_medium = ptserif
reader_font_large = ptserif

[stiivgiaco]

have you tried any other font? i tried with a few last time which I managed to convert but were not picked up by the reader

[pc0124]

i tried bookerly but it did not work as well

[bigbag]

Thanks for the information, I'm aware of this issue. I'm currently preparing a version with a fix.

[pc0124]

diff --git a/scripts/convert-fonts.mjs b/scripts/convert-fonts.mjs
index a53a6ae..8062c68 100644
--- a/scripts/convert-fonts.mjs
+++ b/scripts/convert-fonts.mjs
@@ -84,9 +84,11 @@ class GlyphRasterizer {
 
     const x1 = Math.floor(bbox.x1 * this.scale);
     const x2 = Math.ceil(bbox.x2 * this.scale);
+    const y1 = Math.floor(bbox.y1 * this.scale);
     const y2 = Math.ceil(bbox.y2 * this.scale);
+    
     const width = Math.max(1, x2 - x1);
-    const height = Math.max(1, Math.ceil(bbox.y2 * this.scale) - Math.floor(bbox.y1 * this.scale));
+    const height = Math.max(1, y2 - y1);
 
     // 4x supersampling
     const ssScale = 4;
@@ -96,7 +98,12 @@ class GlyphRasterizer {
 
     const pathOptions = this.variations ? { variation: this.variations } : {};
     const glyphPath = glyph.getPath(0, 0, this.fontSize * DPI / 72, pathOptions);
-    this.rasterizePath(glyphPath, ssBuffer, ssWidth, ssHeight, -x1 * ssScale, y2 * ssScale);
+    
+    // Apply supersampling offsets to the floored/ceiled values
+    const offsetX = -x1 * ssScale;
+    const offsetY = y2 * ssScale;
+    
+    this.rasterizePath(glyphPath, ssBuffer, ssWidth, ssHeight, offsetX, offsetY);
 
     // Downsample
     const buffer = new Uint8Array(width * height);
@@ -118,28 +125,29 @@ class GlyphRasterizer {
   rasterizePath(glyphPath, buffer, width, height, offsetX, offsetY) {
     const edges = [];
     let currentX = 0, currentY = 0, startX = 0, startY = 0;
+    const ssScale = 4;
 
     for (const cmd of glyphPath.commands) {
       switch (cmd.type) {
         case "M":
-          currentX = startX = cmd.x + offsetX;
-          currentY = startY = offsetY - cmd.y;
+          currentX = startX = cmd.x * ssScale + offsetX;
+          currentY = startY = cmd.y * ssScale + offsetY;
           break;
         case "L": {
-          const x = cmd.x + offsetX, y = offsetY - cmd.y;
+          const x = cmd.x * ssScale + offsetX, y = cmd.y * ssScale + offsetY;
           this.addEdge(edges, currentX, currentY, x, y);
           currentX = x; currentY = y;
           break;
         }
         case "Q": {
-          const x = cmd.x + offsetX, y = offsetY - cmd.y;
-          this.addCurve(edges, currentX, currentY, cmd.x1 + offsetX, offsetY - cmd.y1, x, y, 8);
+          const x = cmd.x * ssScale + offsetX, y = cmd.y * ssScale + offsetY;
+          this.addCurve(edges, currentX, currentY, cmd.x1 * ssScale + offsetX, cmd.y1 * ssScale + offsetY, x, y, 8);
           currentX = x; currentY = y;
           break;
         }
         case "C": {
-          const x = cmd.x + offsetX, y = offsetY - cmd.y;
-          this.addCubicCurve(edges, currentX, currentY, cmd.x1 + offsetX, offsetY - cmd.y1, cmd.x2 + offsetX, offsetY - cmd.y2, x, y);
+          const x = cmd.x * ssScale + offsetX, y = cmd.y * ssScale + offsetY;
+          this.addCubicCurve(edges, currentX, currentY, cmd.x1 * ssScale + offsetX, cmd.y1 * ssScale + offsetY, cmd.x2 * ssScale + offsetX, cmd.y2 * ssScale + offsetY, x, y);
           currentX = x; currentY = y;
           break;
         }
@@ -511,10 +519,10 @@ ${glyphs.map(g => `    <div class="glyph">
       const data = atob(canvas.dataset.pixels.split(',')[1]);
       const imgData = ctx.createImageData(w, h);
       for (let i = 0; i < data.length && i < w * h; i++) {
-        const v = 255 - data.charCodeAt(i);
-        imgData.data[i * 4] = imgData.data[i * 4 + 1] = imgData.data[i * 4 + 2] = v;
-        imgData.data[i * 4 + 3] = 255;
-      }
+         const v = 255 - data.charCodeAt(i);
+         imgData.data[i * 4] = imgData.data[i * 4 + 1] = imgData.data[i * 4 + 2] = v;
+         imgData.data[i * 4 + 3] = 255;
+       }
       ctx.putImageData(imgData, 0, 0);
     });
   </script>