react-primitives icon indicating copy to clipboard operation
react-primitives copied to clipboard

The best way to handle font-face

Open likethemammal opened this issue 6 years ago • 1 comments

I'm writing a styled open-sourcable react component. I'd like to use react-primitives to layout and style the whole thing, and there arent many issues I can think of when it comes to using StyleSheet for everything over relying on css, but one comes to mind for this project.

The component will need a custom font as part of it's styling. I know the web and react native each have their own ways of importing custom fonts and setting what fontFamilys are available. But this is such a lightweight component, and it really isnt dependent on react native. I'm basically trying to come up with a way to base64 include the font and set font-face for all platforms.

Is this something that would fall under the .[platform].js pattern, where the .web.js file would be an injectable font-face stylesheet, and the react native file would have it's equivalent? Or is this something StyleSheet could handle? Or is this a situation where I'd just have to instruct in my documentation to include a font-face stylesheet when using the component for web, and follow the traditional react-native custom font importing instructions for the native platforms?

I'm trying to avoid that moment of

"Hey, thanks for installing this package. Now figure out how to include this font to make it look right"

likethemammal avatar Dec 20 '17 21:12 likethemammal