Custom Font in Flutter | Flutter external font | Flutter Tutorial #14

welcome to flutter teacher in this session we will learn how to use custom or external font in the project so without wasting time let's get started first of all we have to download the font that we want to use in the project for this i am visiting a website called fonts.google.com now if you want to use different website i feel you can go for that one this website has got bunch of fonts available for you from this website i will select the font called inspiration so let's click on this inspiration option then click on the button called download family this will download the all font families for you now just click on the button called show all and now it's time to jump inside this folder now once you got the folder make sure that you should extract or unzip this folder so let's click on the option called extract all and now click the button extract now inside this folder called inspiration we have got this specific font file here now here select this file and click on the button called copy so that we have copied this specific font now we have to jump inside the directory where your project is present so my project is present inside directory called d drive inside this we have folder called my app and hello underscore app is name of my project inside this specific folder that is inside this application folder we have to create a new folder called fonts here so i will name this folder response make sure that this folder must be present outside the list folder not inside the leaf folder now inside this font folder i will paste this specific font that we have copied let me copy name of the specific font here now it's time to jump inside the prospect or jumble file let me open the pubspec.yaml file here now inside this popspin.yml file we have to configure this specific font for this just come a little bit down in the file and here you will find that this specific option for configuration font is by default commented so let's uncomment this specific lines by using ctrl slash and instead of this specific font name we have to paste the name of font that i have copied here make sure that this specific line that we have written is actually the path where your font is present now for the family we need to change it to family called inspirations let me copy this inspiration text here and paste this inspiration as the name of family and save this file this prospect dot hamlet pi is a case sensitive as well as space sensitive file so make sure that you must follow the invention that i have followed in the project if you want to configure multiple fonts or multiple font families just uncomment this line and whatever font that we have copied here just apply the name of font here and write the name of this here now after modifying the perfect yaml file don't forget to restart application if it is already running now you can see we have a simple flat replication here we have the import statement then the main function is calling the run app inside run app we have the object of my app my app is created by extending stateless widget inside this my app i am returning the object of metal app inside this meter lab as a whole we have the scaffold and for this cuphold we have the body and as a body of scaffold i have returned the center period now for the center widget let me pass the child in the form of text here and i will use the text let's say hello here and let me pass some style for this we have to use the property called style here so i will use type and for this style we have to use the object of text type let me change the font size a little bit so i will use let's say font size of 40 pixel and let's save the code and look at the changes on the screen now this is what the default font that we are getting for this hello now instead of this default font i want to use the font that we have customized and that we have downloaded for this we would use option called font family and simply paste the name of point here inside a single code save this code and look at the changes it for this video see you guys in the next video if you really like the way i'm explaining the concept then don't forget to like share subscribe and hit the bell notification button to get my latest videos you

Channel: Flutter Teacher

Views: 39,023

Keywords: custom font in flutter, custom font flutter, flutter custom font, external font in flutter, how to use custom font in flutter, how to use external font in flutter, applying custom font in flutter, flutter external font, configure font in pubspec, configure custom font in flutter, flutter, flutter tutorial, flutter tutorial for beginners, flutter external fonts, adding custom font in flutter, adding external font in flutter, external font flutter

Id: qI_7znKKlhA

Length: 4min 15sec (255 seconds)

Published: Sun Mar 20 2022