Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom font doesn't work with Text component #7

Open
andydev404 opened this issue Feb 8, 2020 · 10 comments
Open

Custom font doesn't work with Text component #7

andydev404 opened this issue Feb 8, 2020 · 10 comments

Comments

@andydev404
Copy link
Contributor

As a User when I implement a custom font (Lato, Roboto, Poppins, etc.), the font is no taking effect on the Text component

@EQuimper
Copy link
Member

EQuimper commented Feb 9, 2020

It's should, did you link the font into your app ? If you change the name now the text is like the one you use before

@andydev404
Copy link
Contributor Author

andydev404 commented Feb 9, 2020

The font is already linked when I use import { Text } from 'react-native' works fine

@EQuimper
Copy link
Member

EQuimper commented Feb 9, 2020

If possible may I see your code for this? I use this lib for like 7+ projects with custom fonts and work. Just to make sure.

@andydev404
Copy link
Contributor Author

 import { Text } from 'react-native-design-utility';

// I tested with this 2 ways
<Text font="Lato-Black">Some text</Text>
// and
<Text style={{fontFamily: "Lato-Black"}}>Some text</Text>

@EQuimper
Copy link
Member

EQuimper commented Feb 9, 2020

Ha ok the issue is the font here need to match the theme. So you can example add this font to the base or example Lato. And now you can do font=“Lato”

@EQuimper
Copy link
Member

EQuimper commented Feb 9, 2020

so your theme should have

{
	font: {
		lato: 'Lato-Black',
		base: 'Roboto'
	}
}

<Text font="lato">Hello world</Text>

@andydev404
Copy link
Contributor Author

The same, It does not work

@tolustar
Copy link

tolustar commented Jul 31, 2020

I am having the same issues with @andydev404 , The custom font isn't working properly on Android, but works well on iOS. Following the example you displayed above, if I add the bold or normal props to the text component, the text returns back to the default Android font

@tolustar
Copy link

I got it fixed. After you initialize a theme via npx react-native-design-utility init, remove the weight object on line 56, and everything would work properly

@ghmendonca
Copy link

@EQuimper it doesn't work for me, I have everything right and inspecting the text, I can see that there is no fontFamily set in the text component

This is my theme config:

fonts: {
  base: "Sora",
  sora: "Sora",
},

And I'm using like this:

<Text font="sora">Test</Text>

I've tried not passing the font prop, tried passing fontFamily as prop, none works, the only thing that works is if I pass a style object that has the fontFamily: 'Sora', so I am sure the bug is in this lib

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants