React-native-web: Custom (web) fonts?

[alexandergunnarson]

There is a particular process for adding custom fonts to an iOS project. I assume there is such a process for an Android project. What is the process for adding custom fonts to a react-native-web project? Is it as easy as simply adding an @font-face declaration with the appropriate url relative to the React Native project root? If so, does this hold for production builds and not just dev builds?

Thanks for your feedback!

[necolas]

You can add a standard @font-face definition to the head of your HTML shell page

[alexandergunnarson]

Nice, thanks! I tried it locally and it seemed to work, but I just wanted to make sure. Also this is nice documentation for newcomers to react-native-web (like myself).

[code-by]

Hello!
My project use custom fonts, ex. OpenSans (regular, light, bold).

This is part of my current stylesheet

const MyStyles = StyleSheet.create({
  textInput: {
   fontFamily: 'opensans_light',
  }
}

I'd like to use custom font both in web project and in react (not react-native) storybook.
So where and how I need specify fonts?

Thank you!

[MoOx]

Just add a wrapper with some inline styles if you don't have a CSS file. Example here https://github.com/oblador/react-native-vector-icons#web-with-webpack

[code-by]

I will be very appreciate who could provide any minimal project using custom (google) fonts :)

[giuseppeg]

@necolas would you accept a PR to add an expo-like API to load custom fonts? https://docs.expo.io/versions/latest/sdk/font.html

[necolas]

No, that belongs in a tool like Expo. Thanks for asking :)

[necolas]

"Expo for Web" is an idea that's been kicking around. And making a combination of CRA and CRNA.

[sudhirvkumar]

@alexandergunnarson Can you please provide some details on how you added the font-face css? thanks in advance.

[rsjaiswal]

I have choose react native web in my project without expo, I am facing problem of Date Time picker and responsiveness of site not working, please suggest which datetime picker used for our project and how make responsive template....

[3rdp]

I haven't been able to find it anywhere in the docs and the issues, so I'll just leave it here. My case was Expo with Bare Workflow, so Expo has web support built-in, and I couldn't figure out where I can add a stylesheet to html, so this how I did it:

1. Create a copy of index.js for the web index.web.js
   We tell the bundler that this code is for the web by adding .web.js extension.
2. Create index.css file with @font-face declarations
   Write paths to font files relative to this file.
3. Import CSS from JS for Webpack to bundle this CSS file

// in index.web.js
import './index.css'

1. Now you might have to restart the web server for Webpack to bundle everything up again.

After this font files should be loaded in web app.