React Native Tutorial #22 - Custom Fonts in React Native CLI & Expo Projects

hi welcome to programming with nash in this session we want to use custom fonts and we will do this in react native cli and expo projects [Music] in the preview session we learned how to debug a project using vs code now suppose we want to use a custom font to display text to do this we create another folder called fonts inside the assets folder that we already created we can do this from here or by right clicking on the folder well now we have to put the font file in this folder to have some new phones i go to the google phone site and from there i select my favorite font by the phone preview and from here i download the phone family well i have already downloaded three families of phones and extracted the ttf files from them i copied them to the folder we created now in the project folder i create a file named react hyphen native.config.js inside this file we have to define the address of the fonts folder as assets now open the terminal to add phones to android and ios folders using the link command well the link was done correctly just remember that if you add a new font be sure to run this command again now i run the app to use the phones [Music] in this screen we have defined the style of both texts used in their style sheet then inside the text style we add font family and set its value equal to the full name of the font [Music] well the font should have been applied to the texts but because we used font weight in this style and this font doesn't have a bolder style it hasn't been applied so i deleted and as you can see our font was applied to the text now i use other phones to see the change always make sure the font name you use in font family is exactly the same as the font file name fonts will not apply if uppercase and lowercase letters aren't observed also in ios the font name used must be the same as the original font name if we open the font you will see the original name of the phone at the top which is better to use this name for the font file name so that we don't have any problems in ios well now if we want to use custom fonts in expo projects it will be a little different that's why i created an expo project for testing we want to use custom fonts in this text using this command we can easily use google phones in the project just use the name of the desired phone from google phones at the end of this command i go to google fonts again and this time i search for the font i want to find out what name to use at the end of the comment we can go to this site which is actually a font dictionary for google phones we search for the desired font in it and see its information on the right by copying we get the command that installs this font in expo and paste it in the terminal we will also install the expo uploading package which i will explain later now run the app to apply the phone to the text [Music] well back to the same dictionary of phones using this section we can import all the styles of this phone family we also use the use fonts hook to load the fonts into the function we can also use the error in this hook to return to us if there is an error of loading the fonts now import uploading [Music] and if the phones aren't loaded properly we want the screen not to be displayed and uploading to be displayed instead well i will refresh the app once now i style the text and put font family in one of the fontest sides we loaded as you can see the font was applied to the text i make it a little bigger well to make the text look better i shorten it and increase the size now i will try other fonte styles and you will see that the phone thickness increases we can give any font a name and use that name as font family and here as you can see bold refers to this font style now if we want to use custom fonts as files in the assets folder we create a folder called fonts and put the desired font in it i copy its name to use it inside the hook we created we address the font with a custom name the font address depends on the file we are inside and the name of the font must be in full format now we can use this name as font family you can see the font was applied to the text so there we go we learned how to use custom fonts in our react native project so in the next video we will talk about global styles now if you enjoyed the video please don't forget to like comment share and subscribe and i'll see you in the next session

Channel: Programming with Mash

Views: 35,824

Keywords: react native custom fonts expo, react native custom fonts, expo google fonts, custom font react native expo, custom font react native, google fonts react native expo, react native custom fonts ios, react native 2021, react native, react, mobile development, ios development, android development, javascript, coding, tutorial, react native tutorial, react native for beginners, react tutorial, react native tutorial for beginners, beginners, react vs react native, Programming with mash

Id: ER83EI-b4Xk

Length: 8min 27sec (507 seconds)

Published: Fri Apr 23 2021