docs: A new font fot Jelly Slider percentage (#1871)

Author: iwoplaza

apps/typegpu-docs/src/examples/rendering/jelly-slider/index.ts

@@ -75,6 +75,7 @@ const bezierTexture = slider.bezierTexture.createView();
 const bezierBbox = slider.bbox;
 
 const digitsProvider = new NumberProvider(root);
+await digitsProvider.fillAtlas();
 const digitsTextureView = digitsProvider.digitTextureAtlas.createView(
   d.texture2dArray(d.f32),
 );

apps/typegpu-docs/src/examples/rendering/jelly-slider/numbers.ts

@@ -21,11 +21,15 @@ export class NumberProvider {
       size: [PERCENTAGE_WIDTH, PERCENTAGE_HEIGHT, PERCENTAGE_COUNT],
       format: 'rgba8unorm',
     }).$usage('sampled', 'render');
-
-    this.#fillAtlas();
   }
 
-  #fillAtlas() {
+  async fillAtlas() {
+    // Ensure the font is loaded before drawing
+    await Promise.all([
+      document.fonts.load('180px "Reddit Mono"'),
+      document.fonts.load('140px "JetBrains Mono"'),
+    ]);
+
     const canvas = document.createElement('canvas');
     canvas.width = PERCENTAGE_WIDTH;
     canvas.height = PERCENTAGE_HEIGHT;
@@ -34,8 +38,8 @@ export class NumberProvider {
       throw new Error('Failed to get 2D context');
     }
 
-    ctx.font =
-      '160px "SF Mono", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace';
+    const regularFont = '180px "Reddit Mono", monospace';
+    const percentageFont = '140px "JetBrains Mono", monospace';
     ctx.textAlign = 'right';
     ctx.textBaseline = 'middle';
     ctx.fillStyle = 'white';
@@ -45,11 +49,14 @@ export class NumberProvider {
     for (let i = 0; i <= 100; i++) {
       ctx.clearRect(0, 0, PERCENTAGE_WIDTH, PERCENTAGE_HEIGHT);
 
-      const text = `${i}%`;
       const x = PERCENTAGE_WIDTH - 20;
       const y = PERCENTAGE_HEIGHT / 2;
 
-      ctx.fillText(text, x, y);
+      ctx.font = regularFont;
+      ctx.fillText(`${i} `, x, y);
+
+      ctx.font = percentageFont;
+      ctx.fillText(`%`, x, y + 10);
 
       percentageImages.push(
         ctx.getImageData(0, 0, PERCENTAGE_WIDTH, PERCENTAGE_HEIGHT),

apps/typegpu-docs/src/layouts/PageLayout.astro

@@ -12,6 +12,9 @@ const { title, theme = 'light' } = Astro.props;
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" href="/TypeGPU/favicon.svg" />
     <link rel="sitemap" href="/TypeGPU/sitemap-index.xml" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&family=Reddit+Mono&display=swap" rel="stylesheet">
     <script is:inline src="/TypeGPU/coi-serviceworker.js"></script>
     <style is:global>
       .bg-blurred-radial-purple {