All language subtitles for 7. Incorporating Custom Fonts in Your Flutter App

Now in the original mock-up of our design, we wanted to have a nice fancy font for the part where we display
1

our name.
2

Now, how do we add a custom font to our project?
3

Well, the first part is of course, downloading and getting hold of a font. And the easiest way of doing
4

that, is simply heading to fonts.google.com.
5

And the reason why is because all of these fonts here are free for commercial use.
6

So no matter where you're using it, on a website or of course in your Flutter app, you can use it without
7

fear that somebody will come after you because of copyrighting.
8

So now, you get to look through all of these fonts around 900 of them, and decide which one do I like,
9

what looks nice to me. Or if you're more of a designer, and you know exactly what kind of category you're
10

looking, for say a display type of font, then you can uncheck all the other ones and find the one that
11

you want.
12

Now the one that I'm going to use is something called Pacifico.
13

And this is a font that looks a bit like handwriting. And it looks really pretty, especially when it's
14

contrasted with a normal sort of sans serif font.
15

So this is exactly what we're going to do.
16

And in order to download it, we're going to select this font, and we're going to hit the download button.
17

Now,
18

we have a zip file, and once you unzip it, then you can see that here's the font the .ttf file format.
19

And here is the license that allows you to use it for commercial use. In order to add this to our project,
20

we're gonna do a little bit more dragging and dropping. Again inside my project,
21

I'm going to create a new directory called fonts, and here if I have more than one font, I'm going to
22

drop them all in here.
23

So I'm going to drag my Pacifico, and drop it into fonts, and hit OK.
24

And we're going to add the file to git as well.
25

And you can see that in the preview, it shows us what this font looks like.
26

It looks pretty beautiful, and we're gonna use it to reformat our font for our text widget here.
27

So again, we have to go into our pubspec.yaml
28

and in addition to assets, we're also going to have some fonts. Now, previously before we deleted all the
29

comments, you might remember that there was a comment about how to add custom fonts. And they even point
30

you towards a part of the documentation where it talks about how to use custom fonts. So if you head
31

over to this address, then you can see that it takes you to this page that tells you all about how you
32

can use custom fonts in your project.
33

And we've already imported our font files, so now all we have to do, is declare the font in the pubspec
34

.yaml
35

And the reason why I'm taking you over here is because, the yaml file indentation is super important
36

and it's really easy to get it wrong.
37

So instead, what I recommend is just to simply copy all the parts that you need.
38

We've already got the part that says Flutter, because we already have some assets in it. And then we're
39

going to hit a copy, and we're going to go back and we're going to paste it, right underneath here.
40

So now you can see our fonts is indented by two spaces from our Flutter settings, and then inside our
41

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
42

to do is to change the family to the name of our font family, which in this case is Pacifico. And then
43

we're going to change the location of our asset which is inside a folder called font,
44

and it's called Pacifico-regular.ttf
45

So I can change this word Pacifico, and that's all we need to do. And this is more of a foolproof way
46

of getting our fonts loaded up into our project. And we run package.get,
47

you should see that everything in here is black and white.
48

But if we had an indentation issue, then when we run this, you might get some errors like this telling
49

you that this part here, where it says fonts, it's not what it expected.
50

So indentation matters a lot,
51

and the easiest way of getting this right is to actually just copy it from the source.
52

This makes it so much less error prone.
53

So now that we've got our Pacifico font loaded into our project, from now on we can refer to it
54

by this name that we specify here.
55

So the Pacifico font family.
56

So let's go back into our main.dart, and for the style property of our text, we're going to also update
57

its font family.
58

And here, we can specify the name that we typed into the pubspec file, which was Pacifico, with a capital
59

P.
60

And now that I've added in our new resource, we actually have to rebuild our project from cold,
61

so I had to hit stop, and then hit play so that it links up all the necessary things that we need.
62

And you can see that our new font gets added in and it looks great.
63

It looks a lot better than the default font that we had to begin with.
64

So now as a challenge, I want you to apply what you just learned, and create the next part of our user
65

interface, which is a piece of text still in our column, that describes your role.
66

So it could be Flutter developer, project manager, product manager, designer, whatever it may be. But you're
67

going to make it all caps, and you're going to change the font to something called Source Sans Pro, and
68

you'll find it on Google fonts.
69

Try and pause the video and apply those changes so that we can update the next part of our business
70

card.
71

All right.
72

So we're just going to do exactly what we did previously.
73

We're going to add our Source Sans Pro to our selection, and then we're going to download it so that
74

we have access to it locally. And then we're going to unzip that file. Once you've extracted it and you
75

can see all the different types.
76

We're actually just going to drag in the source sans pro regular, and we're going to drop it into our fonts
77

folder. And then we're going to click OK to move it, and we'll be able to see an excerpt of what it
78

looks like.
79

So now we can go into our pubspec.yaml, and we can copy what we did for the Pacifico font family,
80

and we can paste it right below,
81

but at the same indentation level where the family is. So now, essentially what we're saying is that the
82

custom fonts that we want to use in our Flutter app, there are two families.
83

One is Pacifico,
84

and the other is going to be Source Sans Pro.
85

And we can change the asset location to SourceSansPro-regular and just check to make sure it's
86

the same spelling.
87

And now if we go ahead and click on packages.get, we'll be able to pull in those files to use in
88

our main.dart. Right below our previous text widget,
89

we're going to add our next text widget, and this one is simply going to say your job title.
90

So it could be, I don't know, Flutter developer, or it could be designer, whatever it may be.
91

And then we're going to set the style to a text style that uses the font family that we named just now,
92

which was called Source Sans Pro. And it's really important that this part has to match exactly what
93

you wrote here,
94

so including all the spaces and the upper and lower casing.
95

So you're essentially referring to something inside the fonts with a family name of Source Sans Pro.
96

And by linking it up previously, we already told it that this is where that font resides and where
97

it should look to.
98

Now that we've added in our font family, the rest of it is really up to you how you want to style it.
99

Personally for me, I'm going to change the color to a light teal. So I'm going to go into colors, and
100

then I'm going to go into teal, and then I'm going to specify maybe the 100 shade.
101

Now you might have noticed that there's lots of ways that you can do this.
102

So when I write teal, and my little doc popsup, you can see that there's teal from 50 all the way down
103

to all the way down to 900. And that's kind of the dark or deepness of the shade.
104

But instead of adding in the square brackets, I can also just write a dot, and specify my shade. As in,
105

if I want shade 100, then I can just simply do that.
106

So this is what we've got so far, and the font a little bit too small for my eyes.
107

I think I'm getting a bit old. I can't actually see it that well.
108

So I'm going to increase the font size to maybe a 20 point size.
109

And I'm also going to change something called letter spacing.
110

So this property will determine how much space there is between each of the letters in the word.
111

And I'm going to say maybe 2.5.
112

So a lot of these things you can have a play around with it and see how it looks to you.
113

I think one last thing that I would do to this is I would probably make the font weight bold.
114

And that will probably make it look just how I would like it.
115

The styling is of course up to you.
116

But this lesson is all about making sure that you've understood how to incorporate custom fonts into
117

your Flutter app, and how we can use the pubspec to specify what are font is called, and where it is
118

located inside our project. And then using packages.get to grab it.
119

Now if you had any problem with indentation, be sure to take a look at this file over here and just notice
120

that every single indent is actually two spaces, and it's two spaces from the left, and it's two spaces
121

for every child.
122

Now this is really important.
123

So if you have any errors when you run it, this is the first thing to check.
124

I'll include this file as a download for this lesson, just in case you mess up all the indentations and
125

you just want a quick way of fixing it. In the next lesson,
126

we're going to be looking at how we can add icons that are already made and ready to go, into our app.
127

So for all of that and more, I see on the next lesson.