I am developing an React native app and I am using some custom fonts in the app. I successfully imported installed liked the fonts and it is working fine. But one font name neusa not working(Not showing). When font is called it loading only default font. i am sure all custom fonts i am using is .ttf. All other fonts i downloaded from google fonts but not this one. can any one please suggest a way to fix it
The link i followed
If you are 100% that you followed the guide to the letter then the problem might be that you are using the wrong fontFamily. Not all fonts have the font family equalto their names. This happens a lot with FontAwesome.
Upload your font here: http://torinak.com/font/lsfont.html
It should tell you the fontFamily that you need to use. Otherwise you could log the font names that RN is detecting but that involves a little more work
Related
I am working on an app that includes the user taking a picture, then editing it. However, I have noticed that when the buttons used for editing are displayed, they are often not very visible due to the image background. The buttons contain images that have their colour set by tintColor. I would like the buttons to be visible no matter what the colours of the image are. I have found a CSS filter that achieves this, but there is no React Native implementation of it. I have also found a library that can do this (react-native-color-matrix-image-filters), but I cannot use it because I am using a managed Expo project with Expo Go.
Any help would be much appreciated. :)
Starting from Expo SDK 42, you can install a native library with Expo, you just need to compile a custom Expo Go client app with a native module (react-native-color-matrix-image-filters) pre-compiled and embedded.
You still have amazing Expo DX use native module support.
Check how to compile Expo Go Custom App here - https://www.youtube.com/watch?v=id0Im72UN6w&t=25s
I'm making an Electron + React app, where the user should be able to provide his own fonts. Basically the user would put the fonts he wants to use in a folder next to the executable, and then the executable will read the folder and make those fonts useable.
Is this possible to do? All I could find was has to define custom fonts when I already know of their existence beforehand. But I don't.
So if this is possible, how?
Thanks!
To answerify my comment, you can use the CSS Font Loading API (link to tutorial), i.e.
const fontFace = new FontFace("SomeName", "LocalPath.woff2");
document.fonts.add(fontFace);
I have a question related to React Native.
I have existing application that should be themed and theming should be part of the configurable settings. There should be 3 aspects of such theming: changing colors/theme, changing logo and add custom fonts
I see this is a way that there will be settings view where:
there will be possibility to upload image, image will be stored in filesystem in ios and android and then used as a brand logo
there will be multiple settings regarding some primary, secondary, buttons colors as hash values, or maybe some color picker component
The most complicated stuff is having custom fonts that can be configured by user in setting view of application. Anybody have experience with doing such a thing?
Any thought/suggestions in above points will be helpful. Like links to native libraries for both platform or any tips from more experiences React Native developers
The best ways I see to achieve what you want are :
Use https://github.com/itinance/react-native-fs to access file system so you can easily store and access the logo that the user want. If the image has some size restrictions you could as well store your image Base64 string in AsyncStorage but this is not recommended.
You can have a kind of theming system by using a global style file that your screens use, the values requested (for example "dark", "light" etc...) can be store in AsyncStorage.
Do you want the user to be able to use his own personal font ? I don't think this is possible. If you want to have multiple fonts and the user can choose which font will be used in a list for example you can follow this tutorial to install custom fonts : https://medium.com/#kswanie21/custom-fonts-in-react-native-tutorial-for-ios-android-76ceeaa0eb78. Then all you want to do is use your theming system to select the fontFamily that your text elements will be using !
Let me know if I'm not clear enough or you need advices, I recently did what you try to achieve :)
How can I use custom fonts with React for Web Apps? I do not want to use a CSS file but keep everything in the Component JS file.
I have tried everything and nothing seams to work or at least they are not consistent (sometimes they work sometimes they do not load on ipads or certain computers)?
If anyone can point me in the right direction that would be great.
I have tried doing something like this and it worked for me
Add a CDN for fonts if you are using google fonts or something like:
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">
and then in your CSS use the font-family property and there enter the font you are trying to access from google fonts and it will be working fine. If you want to change the thickness then use the font-weight to manage that.
Im making a website using Drupal 7.
I just installed the 'Social Media' and 'Widgets' Modules.
Then I added the fb like box to the left sidebar region of my danblog theme.
As you can see the box overflows the block.
Can I solve it by some configuration or do I need to change the css manually?
I wanted to know where exactly can I find the CSS of these blocks so that I could try to change it?
There are so many .php files and some .css files in drupal.
If someone could please elaborate on some technique or some basic understanding by which I can find the styling of blocks in those php files as I assume they may not be in seperate .css files
Thanks
Quick fix not recommended:
#f3c805688 { width: 220px!important; }
You really don't want to use !important it works as a quick fix in this case, but the ideal fix would be to change the height of the iFrame before inserting it into the page via some backend interface. Does the social media module have an option to change the width?