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 thenetlify 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.