fabricjs can change the font of a text in a canvas to a font family. For that the font needs to exist in the browser, either CSS or emb link.
I now want to add dynamically a font from a resource (google, self hosted ect) to the css populating it in the document via #font-face. I don't want to just list all fonts in the css beforehand because it can be a huge list. Is it possible to modify the running css in reactjs to add a font face to it?
Use CSS-in-JS solutions like emotion, styled component or radium
Related
I have not been able to pass custom styling to the Podlove <episode-title> element. Is there a way to make custom fonts available in the player?
https://www.npmjs.com/package/#podlove/player-react
Styling the components is done by inline styles, but for some reason
font-family isn't applied.
Currently we are trying to setup our React Applications with NX. Our application has a common layer which ships the native components like input, dropdows, cards, grids etc etc.
That common layer is shipping 3 files in their package for all components
Layout.min.css --- contains layouting css properties. for example width, padding, margin
white.min.css---contains colors properties for white theme
dark.min.css---contains color properties for dark theme
Along with that--package has all the scss variables which are declared and their values for each theme.
As nx has default support for SCSS, how should we approach to generate our app css files as follows
app.layout.min.css
app.white.min.css
app.dark.min.css
Ultimatly, theme switch will be handled programatically where we unload few files and load theme specific files.
We tried multiple native configurations of NX but we couldnt generate multiple css files as output.
There is another problem observed that as soon as we import the css file in any library componet it gets added on app.
I have to make interface suitable with two different color themes - light and dark. Color theme is being selected by user via button/switch/whatever.
The problem (as I think) is that my React application is being bundled via Webpack, so all my SASS-compiled styles is being embedded into the main HTML template as <style>...</style> (each style tag references to its SASS-file). I know, that I can assign some class name to app wrapper and then write nested style for every selector that needs to be recolorized. But it is not such productive as, for example, import necessary SASS file depending on what color theme was selected by user.
Is there any way to solve this problem in a better way?
I'm working with Tutorial App of 2sxc ;"Tutorial Custom Icon Font and Picker",and using font awesome.
The icon picker shows lots of fonts but one particular one "fa-graduation-cap" is just not showing up
http://fontawesome.io/icon/graduation-cap/
I've looked into the fontawesome css file and its mentioned there, but in font picker search it just doesn't show up.
Can you help me guide to a particular file so it starts showing?
Thanks in advance
There seems to be a bug, after looking into FontAwesome CSS file if multiple classes are defined for an icon then the Icon Picker will only get the first css class.
Example in terms of Graduation Cap icon in the css it was listed as
.fa-mortar-board:before,
.fa-graduation-cap:before {
content: "\f19d";
}
Hence the icon picker was only listing the icon with Mortar Board name and skipping Graduation cap.
2sxc can you kindly fix this in your angular js code so search picks up all the class names?
we use the ExtJS "gray" theme in our app, is there a way i can use the "Accessibility" theme for a specific component? a window which includes a very basic form
thanks
The extjs theme is applied using CSS style sheets on certain html element types with certain classes. Once you load a second theme css into the same page, the first theme is overwritten completely.
So it is not possible to mix them in a single app.
You would have to use two HTML pages, which load different style sheets, but same ext.js, and use two different browser windows or an iframe.