Adding Astro Font causes 500 Internal Server Error / Cloudflare Pages

[sizzlingwok]

Everything is up to date. Site works locally. Cloudflare Pages builds without errorr. Steps to reproduce: Importing Astro Font and declaring all fonts in Layout.astro

import { AstroFont } from "astro-font";

<AstroFont
  config={[
    {
      name: "Editorial New",
      src: [
        {
          style: "italic",
          weight: "500",
          path: join(
            process.cwd(),
            "public",
            "fonts",
            "PPEditorialNew-MediumItalic.woff2"
          ),
        },
      ],
      preload: true,
      display: "swap",
      selector: "body",
      fallback: "sans-serif",
    },
  }}
  />

astro.config.mjs

import { defineConfig } from "astro/config";
import cloudflare from "@astrojs/cloudflare";
import sitemap from "@astrojs/sitemap";
import react from "@astrojs/react";

export default defineConfig({
  output: "server",
  adapter: cloudflare({
    imageService: "passthrough",
  }),
  vite: {
    ssr: {
      external: ["buffer", "path", "fs", "os", "crypto", "async_hooks"].map(
        (i) => `node:${i}`
      ),
    },
  },
  integrations: [react(), sitemap()],
});

[rishi-raj-jain]

Hey @sizzlingwok,

Thank you for opening this issue.

So basically there's no public folder (in the serverless env) when deployed to CF Pages, hence you'd want to do something like following in your code:

---
import { join } from "node:path";
import { AstroFont } from "astro-font";

const fontPrefix = import.meta.env.PROD
  ? Astro.site.toString()
  : join(process.cwd(), "public");
---

<AstroFont
    config={[
      {
         name: "Editorial New",
          src: [
            {
              style: "italic",
              weight: "500",
              path: join(
                fontPrefix,
                "fonts",
                "PPEditorialNew-MediumItalic.woff2"
              ),
            },
          ],
          preload: true,
          display: "swap",
          selector: "body",
          fallback: "sans-serif",
        }
    ]}
  />

[rishi-raj-jain]

Do let me know how it turns out!

[rishi-raj-jain]

Documented the same under: https://github.com/rishi-raj-jain/astro-font/tree/master?tab=readme-ov-file#step-3-use-local-fonts-over-cdn-in-case-of-astro-server-side-rendering-with-cloudflare.