Cannot use custom fonts located in the assets folder although other assets work

Capacitor
1

Hey there,
I am wrapping my react web app with capacitor for android. I have set CapacitorHttp plugin to enabled in the capacitor.config.ts which allows capacitor to intercept http requests to my express backend and it does work like a charm; but I have a slight issue.

When I import a static image from my frontend assets folder inside android simulator, everything is golden and it just works. Request is forwarded to http://localhost/my_pic.jpg and I can see the image inside the android simulator.

I import the image like this:
const imageUrl = new URL('/my_pic.jpg', import.meta.url).href;
This works with audio files as well.

But I cannot do the same thing for my custom fonts in the very same assets folder. For some reason capacitor intercepts the request and forwards it to http://localhost/_capacitor_http_interceptor_?u=http%3A%2F%2Flocalhost%2FNotoSans-Bold.ttf.

I import the font just like the image:
const natoBold = new URL('/NotoSans-Bold.ttf', import.meta.url).href;

What could be the reason behind this behavior, and how do I prevent this unnecessary http interception?

2

It looks like Capacitor is intercepting font requests. Try these steps:

  1. Update Capacitor Config: Ensure your capacitor.config.ts excludes font files from interception.
  2. Change Path: Move fonts to a different folder or adjust the path.
  3. Check Documentation: Look into Capacitor and CapacitorHttp docs for settings related to asset handling.
3

Hey, thank you for your reply.

1. I couldn’t find any configuration options for excluding certain assets.
2. I tried moving the fonts into a different folder, and even tried silly things like manually changing their extension to .png but still capacitor intercepts the requests unnecessarily and thus unable to fetch them.
3. CapacitorHttp docs doesn’t list any other option than enabled: true.

4

Are you on the latest version of Capacitor (6.1.2)? Curious as the Capacitor team is continually adding improvements to the http plugin.

5

Yes, I am using @capacitor/core version is 6.1.2.

6

I see now, they are intercepted because the request is made internally from a library I am using called react-pdf. This will probably not be a problem in production but it would be handy to disable interception for requests made to localhost/frontend assets.