Font choice has a large impact on the final design of your app. After watching this video you'll be familiar with the font licensing and implementation.
we wanted to have a nice fancy font for the part where we display our name. Now, how do we add a custom font to our project Well, the first part is, of course, downloading, getting ahold of a font, and the easiest way of doing that is simply heading to fonts.google.com. The reason why is because all of the fonts here that somebody will come after you because of copywriting. Now you get to look through all of these fonts, around 900 of them, and decide which one do I like. What looks nice to me? Or, if you're more of a designer, and you know exactly what kind of category you're looking for, say a display type of font, then you can uncheck all of the other ones, and find the one that you want. Now, the one that I'm going to use is something called Pacifico. This is a font that looks a bit like handwriting, and it looks really pretty, especially when it's contrasted with a normal sort of serif font. So, this is exactly what we're going to do. In order to download it, we're going to select this font, and we're going to hit the download button. Now, we have a zip file, and once you unzip it, then you can see that here's the font, the ttf file format, and here is the license that allows you to use it for commercial use. In order to add this to our project, we're going to do a little more dragging and dropping. Again, inside my project, I'm going to create a new directory called fonts. And here, if I have more than one font, I'm going to drop them all in here. So, I'm going to drag my Pacifico, and drop it into fonts, and hit OK, We're going to add the file to get as well. You can see that in the preview, it shows us what the font looks like. It looks pretty beautiful. We're going to use it to reformat our font for our text widget here. So, again, we have to go into our pubspec.yaml. In addition to assets, we're also going to have some fonts. Now, previously, before we deleted all of the comments, you might remember that there was a comment about how to add custom fonts, and they even point you towards a part of the documentation where it talks about how to use custom fonts. So, if you head over to this address, then you can see that it takes you to this page that tells you all about how you can use custom fonts in your project. We've already imported our font files, so now all we have to do is declare the font in the pubspec.yaml. The reason I'm taking you over here is because yaml file indentation is super important, and it's really easy to get it wrong. So, instead, what I recommend is you copy all the parts that you need. We've already got the part that says Flutter, because we already have some assets in it. Then we're going to hit copy, and we're going to to back, and we're going to paste it right underneath here. So, now you can see our fonts is indented two spaces from our Flutter settings. Then, inside our settings, we've got our font family, and we've got our fonts, and we've got our font asset. So, now, all we've got to do is change the family to the name of our font family, which in this case is Pacifico. Then we're going to change the location of our asset, which is inside a folder called fonts, and it's called Pacifico-regular.ttf. So, I can change this word. Pacifico. And that's all we need to do. This is more a fool-proof way of getting our fonts loaded up into our project. When we run package.get, you should see that everything in here is black and white, but if we had an indentation issue, then when we run this, you might get some errors like this, telling you that this part here, where it says fonts, it's not what I expected. So indentation matters a lot, and the easiest way of getting things right, Try and pause the video and apply those changes, so we can update the next part of our business card. All right, so we're just going to do exactly what we did previously. We're going to add our Source San Pro to our selection. Then we're going to download it, so we have access to it locally. Then we're going to unzip that file. Once you've extracted it, and you can see all the different types, we're actually just going to drag in the Sources San Pro Regular, and we're going to drop it into our fonts folder. Then, we're going to click OK to move it, and we'll be able to see an excerpt of what it looks like. Now, we can go into our pubspec.yaml, and we can copy what we did for the Pacifico font family, and we can paste it right below, but at the same indentation level where the family is. Now, essentially what we're saying is that the custom fonts that we want to use in our Flutter app, there are two families, One is Pacifico, and the other is going to be Source Sans Pro. We can change the asset location to Source Sans Pro-Regular, and just check to make sure it's the same spelling. Now, if we go ahead and click on packages.get, we'll be able to pull in those files to use in our main .dart. Right below our previous text widget, we're going to add our next text widget. This one is simply going to say your job title. It could be a generic Flutter Developer, or it could be Designer, whatever it may be. Then, we're going to set the style to a text style that uses the font family that we named just now, which was called Sources Sans Pro. It's really important that this part has to match exactly what you wrote here, including all the spaces and the upper and lower casing. You're essentially referring to something inside the fonts, with a family name of Source Sans Pro, and by linking it up previously, we already told it that this is where that font resides, and where it should look to. Now that we've added in our font family, the rest of it, it's really up to you how you want to style it. Personally, for me, I'm going to change the color to a light teal. So, I'm going to go into colors, then I'm going to go into teal, and then I'm going to specify maybe the 100 shade. Now, you might've noticed that there's lots of ways that you can do this. So, when I write teal, and my little doc pops us, you can see that there's teal from 50, all the way down to, all the way down to 900, and that's the dark or deepness of the change. But instead of adding in the square brackets, I can also just write a dot, and specify my shade. As in I want shade 100, then I can just simply do that. So, this is what we've got so far. The font's a little too small for my eyes. I think I'm getting a bit old. Can't actually see it that well. I'm going to increase the font size to maybe a 20 point size. I'm also going to change something called letter spacing. So, this property will determine how much space there is between each of the letters in the word. I'm going to say, maybe, 2.5. A lot of these things, you can have a play around with it, and see how it looks to you. I think one last thing that I would do to this, is I would probably make the font weight bold. That will probably make it look just how I would like it. The styling, of course, is up to you, but this lesson is all about making sure you've understood how to incorporate custom fonts into your Flutter app, and how we can use the pubspec to specify what our font is called and where it is located inside our project, and then using packages.get to grab it. Now, if you had any problem with indentation, be sure to take a look at this file over here, and just notice that every single indent is actually two spaces. It's two spaces from the left, and it's two spaces for every child. Now, this is really important. If you have any errors when you run it, this is the first thing to check. I'll include this file as a download for this lesson, just in case you mess up all the indentations, and you just want a quick way of fixing it. In the next lesson, we're going to be looking at how we can add icons, already made, and ready to go into our app. So, for all of that, and more, I'll see you in the next lesson.
This course was created by London App Brewery. We are pleased to host this content in our library.