I'm using react-native-render-html 6.3.4, attempting to use custom font, but can't seem to change the font family for 'strong' and 'em' tags. Other attributes are working like font size or font style but not font family.
const html = `<p><strong> Custom font bold.</strong> Regular text font family. </p>`;
<HTML
source={{ html }}
systemFonts={systemFonts}
tagsStyles={{
strong: {
fontFamily: 'PLEC-Regular',
fontStyle: 'italic',
fontSize: 30,
},
}}
/>```
This is how I solved my problem. I don't know why but the fontWeight must be different '700'
<HTML
source={{ html }}
systemFonts={systemFonts}
tagsStyles={{
strong: {
fontFamily: 'PLEC-Regular',
fontStyle: 'italic',
fontSize: 30,
fontWeight:'800',
},
}}
/>
Related
Problem:
I have font separated to 2 files, like "XSansRegular.ttf" and "XSansBold.ttf", both has same font family, like "X Sans".
I have added it as assets.
But when I'm trying to use them with setting:
style={{
fontFamily: "X Sans"
}}
it doesn't work. I need to use exact file name, like this:
style={{
fontFamily: "XSansRegular"
}}
What I want to do:
Use it with font name, instead of file name
style={{
fontFamily: "X Sans"
}}
with possibility to pass there props like bold
style={{
fontFamily: "X Sans",
fontWeight: 'bold'
}}
Do you have the linked font files ?
If your react-native version >= 0.70，Run npx react-native-asset to link font files and try again.
I am using react native custom fonts and there is an issue with that. with default the text is on center and when I use a Font then text has not on center.
here is code.
<TextInput
style={{
height:40,
width:width-10,
margin:5,
backgroundColor:"#eee",
borderRadius:5,
paddingLeft:20,
fontFamily:FONTS.medium // if I comment this line then placeholder and text input is on center.
}}
placeholder="Search Here"
/>
Image with default fonts
note: I have checked it with multiple fonts and have same issue.
Try if the prop includeFontPadding or lineHeight remove the spacing.
<Text
style={{
backgroundColor: 'red',
//lineHeight: 92,
fontSize: 24,
color: '#000000',
fontFamily: 'Roboto-Regular',
includeFontPadding: false}}>
Search Here
</Text>
If this don’t work check the font itself has a spacing. Open the font file *.ttf and check if the the text has a big spacing.
use includeFontPadding attribute, it will remove the default space
<Text style={{
includeFontPadding: false
}}>
Search Here
</Text>
I have a simple Text component with a style in my App.
If I add fontweight: 'bold', the last character (sometimes a whole word) disappears.
two sample text components:
<Text style={styles.price}>{priceDisplay(deal.price)}</Text>
<Text style={styles.cause}>{deal.cause.name}</Text>
the styling for these two:
cause: {
fontSize: 14,
fontWeight: 'bold',
},
price: {
fontSize: 16,
textAlign: 'center',
fontWeight: 'bold',
},
without fontweight
with fontweight \
Thanks in advance.
EDIT: The Problem comes from my OnePlus Smartphone which has the OnePlus-Slate font as standard. That font causes the problem. If I change the font in my code to something like 'Roboto', the fontweight bold works.
Here are instructions to change the default font for the project: https://ospfolio.com/two-way-to-change-default-font-family-in-react-native/#why-do-myapp-sometimes-get-texts-cut-off-on-some-android-phone
Alternatively you can just change the font in your phone.
I have a standard Text component in my code.
<Text style={Styles.headerText} numberOfLines={2}>
{this.props.config.mag_screen_title}
</Text>
I am specifying lineHeight in the style.
headerText: {
fontFamily: fonts.gilroyBold,
fontSize: 24,
lineHeight: 25,
},
However, the display does not respect my lineHeight settings. The displayed lineHeight in inspector comes as 31 pixels.
The spec with the correct lineHeight looks like this.
It may be because of using nesting Text. If you want to change lineHeight, you must change style of the parent Text like this:
<Text style={ {lineHeight: 25} }>
Parent Text <Text style={ {fontSize: 24} }>Child Text</Text>
</Text>
I am trying to render multiline text Eg. This is my text Read more, where for 'Read more' I am applying a style textDecorationLine: 'underline'. It works fine on Android. But in iOS 13, it works only if the underline text is not in the first line.
I tried to wrap this text in View, but I have to render this text at the end of a text that is obtained from the Server. Any solution?
<Text
style={{
fontSize: 12,
flexWrap: "wrap",
marginHorizontal: 10,
}}
>
{text}
<Text
style={{
textDecorationLine: "underline",
textDecorationStyle: "solid",
}}
onPress={() => {
this.readMore();
}}
>
Read more
</Text>
</Text>
I have the same issue and just found out that this has nothing to do with React Native. It is a font glitch which is also there when you show the font with underline in a native application. It is also unrelated to iOS 13 since it also happens with iOS 11. Though there is a difference between React Native and iOS.
This is the Balto font in React Native:
This is the Balto font in native:
Used font specs:
Family: Balto
Size: 19
Weight: Bold
Style: underline
You didn't specify the color for your text component.
<Text
style={{
textDecorationLine: 'underline',
textDecorationStyle: 'solid',
textDecorationColor: "red",
}}
whatever your text
</Text>