How To Add Custom Fonts In React Native In 5 Minutes Android and IOS

in this lesson we're gonna learn how to add custom fonts here in Android and iOS errors are a default font family that react native support for example Roboto or photo is only in iOS and there is also an Android sorry in Android and there is also avenir and that that's only works on iOS we want to add our custom fonts any fonts that we want and make it work in Android and iOS so let's go and and dig a font let's type Google fonts browse fonts let's type for example [Music] um there is a Roboto robik let's let's select any any font family that we wanna use there is lateral here let's let's pick this bit this later let's also pick um Railway Roboto slab let's also make this let's download this family just press and download Family let's download this family too here on our download folder there is our fonts we've downloaded there's lato and robot slab let's export it and add it to our react native project that's our admitted project let's create a folder inside this folder uh another folder called called fonts SRC fonts and let's add those fonts to it let's add those ones here this is the letter font and that's the Roboto font let's add them great now we just need to link those those fonts how to link them to link them we need to add um we need to add a file called react native dot config dot GS to link those fonts and inside this for file we're gonna just type module put exports equals to project let's add I Android as an empty object and IOS as an empty object too and that's the the important step and it's the assets and in our assets we just need to put the source of our phones and this source is dot SRC phones to link those those fonts if you want to get them if you want to give them from xco from vs code Just Dub right click and just type we'll just copy relative path log SRC Dash fonts and we have to do to put this dot here to ensure that we have at the same route okay of react native config and SRC now Auto all what we need just to save and just to type that code in BX react native assets and press enter and if we see this message here linking to iOS and info linking to project Android here now we have we have linked our our fonts now let's make sure that we've linked it correctly just rerun the app your iOS and yarn Android we've just are running our apps to test them that's Android now let's test it on Android that's the custom font Let's uh use just pick the the family name and give him phone Channel font family is LA to Black great isn't it let's let's pick another font family let's copy this text and add a new text with a new font family let's make the this font family let's pick another another font family called robots lab old or Roboto slab extra light rename and just put it here wow great isn't it let's let's try one more time let's pick this semi Paul tropoto font family wow those custom fonts are great aren't them

Channel: HeroDev

Views: 3,400

Keywords: react native custom fonts, expo react native custom fonts, react native custom fonts not working, react native custom fonts ios, how to add custom fonts in react native ios, react native web custom fonts, how to use custom fonts in react native cli, ultimate guide to use custom fonts in react native, react native custom fonts android, react native custom font not working android, how to add custom fonts in react native, react native fonts list, react native cli custom fonts, herodev

Id: 3ADlWd1j2-Q

Length: 5min 29sec (329 seconds)

Published: Fri Sep 15 2023