fonts in NextJS - You may need an appropriate loader to handle this file type,

[rodbs]

I'm using dripsy following this guide to load fonts using useFonts.
https://snack.expo.dev/@nandorojo/dripsy-custom-fonts

It works on React Native, but not in web

I'm getting this error:

wait  - compiling...
error - ../../packages/app/provider/assets/fonts/Inter/Inter-Bold.ttf 
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders   
(Source code omitted for this binary file)

I understand NextJs is not loading the fonts.

I've used this next-fonts package , but I cannot make it work.
https://docs.expo.dev/guides/using-nextjs/#font-support

module.exports = withPlugins(
  [withTM, [withExpo, [withFonts(), { projectRoot: __dirname }]]],
  nextConfig
)

Is this the way to share fonts between React Native and NextJs? For images, is it the same process with next- images. thx!

[nandorojo]

your next config isn’t a proper array. withFonts should go before withExpo’s array.

[rodbs]

Like this ? why? I'm getting the same error:

module.exports = withPlugins(
  [withTM, [withFonts , [withExpo, { projectRoot: __dirname }]]],
  nextConfig
)

In the doc says :

const { withExpo } = require('@expo/next-adapter');
const withFonts = require('next-fonts');

module.exports = withExpo(
  withFonts({
    projectRoot: __dirname,
  })
);

[nandorojo]

No, the first one is still wrong.

module.exports = withPlugins(
  [withTM, withFonts, withImages, [withExpo, { projectRoot: __dirname }]],
  {
    // ...
  }
)

[rodbs]

Ok, thanks. I've seen it's here! :)
https://solito.dev/install

But it's still not working for me because the useFonts functions seems to be not loading. I'm getting a blank page

export function Fonts({ children }) {
  const [loaded] = useFonts({
    dripsy: require('app/assets/fonts/Inter/Inter-Regular.ttf'),
    dripsyBold: require('app/assets/fonts/Inter/Inter-Bold.ttf'),
  })

  return <>{loaded && children}</>
}

export function Dripsy({ children }: { children: React.ReactNode }) {
  const colorMode = useColorScheme()

  return (
    <Fonts>
      <DripsyProvider
        theme={colorMode === 'dark' ? theme : themeLight}
        // this disables SSR, since react-native-web doesn't have support for it (yet)
        ssr
      >
        {children}
      </DripsyProvider>
    </Fonts>
  )
}

Is it supposed that any folder behind packages/app is shared between nextJS and expo? I've tried to place the files under / public ... in nextJs but it's not working either

[nandorojo]

useFonts is only meant to run on the native app, are you using it on Web?

[rodbs]

yeap, i'm trying to use for web (nextJS) (using the same code for both native and web)
Should I split the code and load it on web in other way? which way do you recommend?

[nandorojo]

yeah, see the bottom of the dripsy instructions for Web. you should use link to load fonts in on web, just like any website.

[danieloi]

This might help

expo/google-fonts#5 (comment)

useFonts can actually work on the web 🎉

[nandorojo]

Hey guys, I added a full example for using custom fonts with Solito here.

npx create-solito-app@latest my-solito-app -t with-custom-font