No loader is configured for ".ttf" files

Hello Netlify Team,
I’m trying to use React PDF by running it on a Netlify Function, for the most part, it works fine, but when I try to import font files, I get the following error:

✘ [ERROR] No loader is configured for ".ttf" files: src/pdf/fonts/NotoSansTamil-SemiBold.ttf

    src/pdf/hooks/useFontStyle.ts:14:34:
      14 │ import notoSansTamilSemiBold from "~/pdf/fonts/NotoSansTamil-SemiBold.ttf";

This is my netlify.toml file configuration:

[functions]
  included_files = ["src/pdf/fonts/**"]

And my file estructure is the following:


Something I’d like to mention is, as I’m generating PDFs, it would be much more convenient to have access to the fonts synchronously, as I need to know (mostly due to logic encapsulation in React Hooks) if my text should use one font or another (based on the language).

I mention this as I can see a solution being having dynamic imports, but that’d return a promise and for what I tested, it didn’t solve the problem (I kept getting the same error mentioned above even when trying it like this):

const font = require("../fonts/NotoSans-Regular.ttf")

Additional Information

  • Environment: netlify cli - (running the netlify dev command).
  • tsconfig:
{
  "compilerOptions": {
    "jsx": "react",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "target": "es2022",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "rootDir": ".",

    "strict": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitOverride": true,

    "module": "preserve",
    "noEmit": true,

    "lib": ["ESNext", "DOM"],
    "paths": {
      "~/*": ["./src/*"]
    }
  }
}
  • netlify.toml:
[functions]
  included_files = ["src/pdf/fonts/**"]
  • package.json:
{
  "name": "stoplight-new-lambdas",
  "version": "1.0.0",
  "type": "module",
  "dependencies": {
    "@netlify/functions": "^3.0.0",
    "@react-pdf/renderer": "^4.1.6",
    "react": "^19.0.0",
    "zod": "^3.24.1"
  },
  "devDependencies": {
    "@types/react": "^19.0.8",
    "typescript": "^5.7.3"
  }
}
  • Logs:
↳ netlify dev
◈ Netlify Dev ◈
◈ Injecting environment variable values for all scopes
◈ Ignored general context env var: LANG (defined in process)
◈ No app server detected. Using simple static server
◈ Unable to determine public folder to serve files from. Using current working directory
◈ Setup a netlify.toml file with a [dev] section to specify your dev server settings.
◈ See docs at: https://docs.netlify.com/cli/local-development/#project-detection
◈ Running static server from "stoplight-new-lambdas"
◈ Setting up local development server

◈ Static server listening to 3999

   ┌─────────────────────────────────────────────────┐
   │                                                 │
   │   ◈ Server now ready on http://localhost:8888   │
   │                                                 │
   └─────────────────────────────────────────────────┘

✘ [ERROR] No loader is configured for ".ttf" files: src/pdf/fonts/NotoSansTamil-Regular.ttf

    src/pdf/hooks/useFontStyle.ts:13:33:
      13 │ import notoSansTamilRegular from "~/pdf/fonts/NotoSansTamil-Regular.ttf";
         ╵                                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] No loader is configured for ".ttf" files: src/pdf/fonts/Poppins-SemiBold.ttf

    src/pdf/hooks/useFontStyle.ts:21:28:
      21 │ import poppinsSemiBold from "~/pdf/fonts/Poppins-SemiBold.ttf";
         ╵                             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] No loader is configured for ".ttf" files: src/pdf/fonts/NotoSansMyanmar-SemiBold.ttf

    src/pdf/hooks/useFontStyle.ts:12:36:
      12 │ import notoSansMyanmarSemiBold from "~/pdf/fonts/NotoSansMyanmar-SemiBold.ttf";
         ╵                                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] No loader is configured for ".ttf" files: src/pdf/fonts/NotoSans-Regular.ttf

    src/pdf/hooks/useFontStyle.ts:7:28:
      7 │ import notoSansRegular from "~/pdf/fonts/NotoSans-Regular.ttf";
        ╵                             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] No loader is configured for ".ttf" files: src/pdf/fonts/NotoSansArabic-Regular.ttf

    src/pdf/hooks/useFontStyle.ts:9:34:
      9 │ import notoSansArabicRegular from "~/pdf/fonts/NotoSansArabic-Regular.ttf";
        ╵                                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] No loader is configured for ".ttf" files: src/pdf/fonts/AnekGujarati-Regular.ttf

    src/pdf/hooks/useFontStyle.ts:16:32:
      16 │ import anekGujaratiRegular from "~/pdf/fonts/AnekGujarati-Regular.ttf"; // NOTE: not using Noto Sans Gujarati because it doesn't work with fontkit for some reason
         ╵                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] No loader is configured for ".ttf" files: src/pdf/fonts/Poppins-Regular.ttf

    src/pdf/hooks/useFontStyle.ts:20:27:
      20 │ import poppinsRegular from "~/pdf/fonts/Poppins-Regular.ttf";
         ╵                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] No loader is configured for ".ttf" files: src/pdf/fonts/NotoSansArabic-SemiBold.ttf

    src/pdf/hooks/useFontStyle.ts:10:35:
      10 │ import notoSansArabicSemiBold from "~/pdf/fonts/NotoSansArabic-SemiBold.ttf";
         ╵                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] No loader is configured for ".ttf" files: src/pdf/fonts/NotoSans-SemiBold.ttf

    src/pdf/hooks/useFontStyle.ts:8:29:
      8 │ import notoSansSemiBold from "~/pdf/fonts/NotoSans-SemiBold.ttf";
        ╵                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] No loader is configured for ".ttf" files: src/pdf/fonts/NotoSansTamil-SemiBold.ttf

    src/pdf/hooks/useFontStyle.ts:14:34:
      14 │ import notoSansTamilSemiBold from "~/pdf/fonts/NotoSansTamil-SemiBold.ttf";
         ╵                                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] No loader is configured for ".ttf" files: src/pdf/fonts/AnekGujarati-SemiBold.ttf

    src/pdf/hooks/useFontStyle.ts:17:33:
      17 │ import anekGujaratiSemiBold from "~/pdf/fonts/AnekGujarati-SemiBold.ttf"; // NOTE: not using Noto Sans Gujarati because it doesn't work with fontkit for some reason
         ╵                                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] No loader is configured for ".ttf" files: src/pdf/fonts/NotoSansMyanmar-Regular.ttf

    src/pdf/hooks/useFontStyle.ts:11:35:
      11 │ import notoSansMyanmarRegular from "~/pdf/fonts/NotoSansMyanmar-Regular.ttf";
         ╵                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] No loader is configured for ".ttf" files: src/pdf/fonts/TiroTelugu-Regular.ttf

    src/pdf/hooks/useFontStyle.ts:19:30:
      19 │ import tiroTeluguRegular from "~/pdf/fonts/TiroTelugu-Regular.ttf"; // NOTE: Not using Noto Sans Telugu because it doesn't work with fontkit, also Tiro Telugu does not have a semi bold variant
         ╵                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

◈ Failed to load function pdf: Build failed with 13 errors:
src/pdf/hooks/useFontStyle.ts:7:28: ERROR: No loader is configured for ".ttf" files: src/pdf/fonts/NotoSans-Regular.ttf
src/pdf/hooks/useFontStyle.ts:8:29: ERROR: No loader is configured for ".ttf" files: src/pdf/fonts/NotoSans-SemiBold.ttf
src/pdf/hooks/useFontStyle.ts:9:34: ERROR: No loader is configured for ".ttf" files: src/pdf/fonts/NotoSansArabic-Regular.ttf
src/pdf/hooks/useFontStyle.ts:10:35: ERROR: No loader is configured for ".ttf" files: src/pdf/fonts/NotoSansArabic-SemiBold.ttf
src/pdf/hooks/useFontStyle.ts:11:35: ERROR: No loader is configured for ".ttf" files: src/pdf/fonts/NotoSansMyanmar-Regular.ttf
...
 ›   Error: Netlify CLI has terminated unexpectedly
This is a problem with the Netlify CLI, not with your application.
If you recently updated the CLI, consider reverting to an older version by running:

npm install -g netlify-cli@VERSION

You can use any version from https://ntl.fyi/cli-versions.

Please report this problem at https://ntl.fyi/cli-error including the error details below.

// ... aditional stack trace that points out to my computer's working directory...

The only post I’ve found about a similar problem regarding netlify and fonts, is this post, but they seem to have a different cause of the problem than mine.


Based on the docs: React-pdf

source

Specifies the source of the font. This can either be a valid URL, or an absolute path if you’re using react-pdf on Node.

So it sounds like you can use join(cwd(), 'src', 'pdf', 'fonts', 'font-name.ttf') instead if importing the fonts.

1 Like

Hey @hrishikesh! Thank you for your response. That seems to have been the answer to using fonts.

For anyone interested, I just made a function like this:

import { join } from "path";
import { cwd } from "process";

function getFontPath(fontName: string) {
  return join(cwd(), "src", "pdf", "fonts", `${fontName}.ttf`);
}

And I replaced my font imports from this:

import notoSansTamilSemiBold from "~/pdf/fonts/NotoSansTamil-SemiBold.ttf";

to this:

const notoSansTamilSemiBold = getFontPath("NotoSansTamil-SemiBold");

And finally, I just register those fonts with React PDF’s Font.register() method:

Font.register({
  family: "NotoSansTamil",
    fonts: [
      { src: notoSansTamilRegular },
      { src: notoSansTamilSemiBold, fontWeight: "bold" },
    ],
});

Just be mindful to bundle those files so that they’re available at runtime. I haven’t tested it without it, but I think you’ll probably need to add them to your netlify.toml file.

[functions]
  included_files = ["src/pdf/fonts/**"] // Or whatever the path to your fonts is