Now in the original mock-up of our design, 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 and getting hold of a font. And the easiest way of doing
that, is simply heading to fonts.google.com.
And the reason why is because all of these fonts here are free for commercial use.
So no matter where you're using it, on a website or of course in your Flutter app, you can use it without
fear that somebody will come after you because of copyrighting.
So 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 the other ones and find the one that
you want.
Now the one that I'm going to use is something called Pacifico.
And 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 sans serif font.
So this is exactly what we're going to do.
And 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 gonna do a little bit 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.
And we're going to add the file to git as well.
And you can see that in the preview, it shows us what this font looks like.
It looks pretty beautiful, and we're gonna use it to reformat our font for our text widget here.
So again, we have to go into our pubspec.yaml
and in addition to assets, we're also going to have some fonts. Now, previously before we deleted all 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.
And we've already imported our font files, so now all we have to do, is declare the font in the pubspec
.yaml
And the reason why I'm taking you over here is because, the yaml file indentation is super important
and it's really easy to get it wrong.
So instead, what I recommend is just to simply copy all the parts that you need.
We've already got the part that says Flutter, because we already have some assets in it. And then we're
going to hit a copy, and we're going to go back and we're going to paste it, right underneath here.
So now you can see our fonts is indented by two spaces from our Flutter settings, and then inside our
fonts, we've got our font family and we've got our fonts, and we've got our font asset. So now all we need
to do is to change the family to the name of our font family, which in this case is Pacifico. And then
we're going to change the location of our asset which is inside a folder called font,
and it's called Pacifico-regular.ttf
So I can change this word Pacifico, and that's all we need to do. And this is more of a foolproof way
of getting our fonts loaded up into our project. And 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 it expected.
So indentation matters a lot,
and the easiest way of getting this right is to actually just copy it from the source.
This makes it so much less error prone.
So now that we've got our Pacifico font loaded into our project, from now on we can refer to it
by this name that we specify here.
So the Pacifico font family.
So let's go back into our main.dart, and for the style property of our text, we're going to also update
its font family.
And here, we can specify the name that we typed into the pubspec file, which was Pacifico, with a capital
P.
And now that I've added in our new resource, we actually have to rebuild our project from cold,
so I had to hit stop, and then hit play so that it links up all the necessary things that we need.
And you can see that our new font gets added in and it looks great.
It looks a lot better than the default font that we had to begin with.
So now as a challenge, I want you to apply what you just learned, and create the next part of our user
interface, which is a piece of text still in our column, that describes your role.
So it could be Flutter developer, project manager, product manager, designer, whatever it may be. But you're
going to make it all caps, and you're going to change the font to something called Source Sans Pro, and
you'll find it on Google fonts.
Try and pause the video and apply those changes so that 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 Sans Pro to our selection, and then we're going to download it so that
we have access to it locally. And 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 source sans pro regular, and we're going to drop it into our fonts
folder. And then we're going to click OK to move it, and we'll be able to see an excerpt of what it
looks like.
So 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. So 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.
And we can change the asset location to SourceSansPro-regular and just check to make sure it's
the same spelling.
And 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, and this one is simply going to say your job title.
So it could be, I don't know, Flutter developer, or it could be designer, whatever it may be.
And 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 Source Sans Pro. And it's really important that this part has to match exactly what
you wrote here,
so including all the spaces and the upper and lower casing.
So 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 is 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, and
then I'm going to go into teal, and then I'm going to specify maybe the 100 shade.
Now you might have noticed that there's lots of ways that you can do this.
So when I write teal, and my little doc popsup, you can see that there's teal from 50 all the way down
to all the way down to 900. And that's kind of the dark or deepness of the shade.
But instead of adding in the square brackets, I can also just write a dot, and specify my shade. As in,
if I want shade 100, then I can just simply do that.
So this is what we've got so far, and the font a little bit too small for my eyes.
I think I'm getting a bit old. I can't actually see it that well.
So I'm going to increase the font size to maybe a 20 point size.
And 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.
And I'm going to say maybe 2.5.
So 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.
And that will probably make it look just how I would like it.
The styling is of course up to you.
But this lesson is all about making sure that you've understood how to incorporate custom fonts into
your Flutter app, and how we can use the pubspec to specify what are 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, and it's two spaces from the left, and it's two spaces
for every child.
Now this is really important.
So 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 that are already made and ready to go, into our app.
So for all of that and more, I see on the next lesson.