search

FormidableLabs / radium

A toolchain for React component styling.
http://formidable.com/open-source/radium/
MIT License
7.38k stars 308 forks source link

@font-face supported？ #716

Open zhangmengxue opened 8 years ago

zhangmengxue commented 8 years ago

This is amazing , but is css3 @font-face supported? The doc doesn't mentioned?

ianobermiller commented 8 years ago

Radium doesn't have any explicit support for @font-face.. We definitely could add something similar to the @keyframes helper.

alexlande commented 8 years ago

We could add @font-face support, but I don't know if we really need to. I don't think we would gain much from handling it in Radium.

kylpo commented 8 years ago

@alexlande I would benefit from using this in my custom <Text /> and <Header /> components to remain completely independent and modular.

Currently, I have to add the @font-faces in my html head's inline styles, which leaves my components coupled. Can you think of a current Radium way to get around this? (I'm still learning Radium)

alexlande commented 8 years ago

No, there's nothing built in to Radium to support that use case. I do understand the inclination for all components to be self-contained, but I don't know if it's a common enough case to add it to the lib.

I would expect the vast majority of apps to handle their own webfont loading (either through a font service or through their own @font-face declarations, which might be inlined in the head, or lazy loaded, or etc)

kylpo commented 8 years ago

That's fair. I think Aphrodite has a more applicable use case than mine for why this feature might be worth adding: https://github.com/Khan/aphrodite#font-faces

ianobermiller commented 8 years ago

FWIW you should be able to do this fairly easily with a Radium plugin. Just look for the font-face property and add the appropriate CSS.

kylpo commented 8 years ago

@ianobermiller Good idea - thanks! I'll let you know if I end up with anything worth sharing.

rodrigoBerlochi commented 6 years ago

Maybe that support could be helpful when you are working on a library of components instead of the app itself. A company might ensure implementing that library, that all the company's apps match the corporate UX guidelines. And that frequently involves the font family. The plugin approach souns interesting.

dangnelson commented 5 years ago

I've been searching for a way to include base64 encoded fonts into react so that I don't need to use a font-service, include the clunky base64 code in the index.html file or separate stylesheet. By storing them as data, they would load with the page, avoiding the fonts popping in after the fact on slower connections. The software I'm writing is lightweight enough (thanks to Radium) that fonts are currently the only piece of the puzzle requiring me to load a separate css file.