In this video we're going to talk about ways of including custom fonts and using them in our success
so that we don't have to rely on these built in fonts the system fonts like Arial and Georgia that are
not very reliable in the first place.
Some people's machines won't have them and they're pretty limited even if all of them are available
.
It's not many fonts and it's not many good fonts.
So luckily it's pretty easy to include her own fonts and that can be a font that we own that we've purchased
that our company owns although they can get very very expensive if you've never looked into font pricing
.
Some of the better ones can cost hundreds of thousands of dollars.
So Google has an option out there it's called Google fonts and it's a really great resource.
Basically Google has a bunch of I think it's about 100 fonts online for free that are very easy to include
in our own application.
Just a few clicks.
So I'm going to show you how to do that now.
So if we go to Google fonts and just Google dot com slash fonts you'll see we're immediately presented
with a list of fonts here we can scroll through them.
We can sort them by popularity alphabetical most recent.
We can change the preview text that we're looking at.
Usually it just keep it how it is.
And I'm actually going to just pick two fonts here that are very distinct so don't judge me based off
of which ones they pick.
They may not be my favorite but they're just going to be obvious so that you can see that they're different
.
So I'm going to go let's do popularity and let's pick a railway here and I'm going to click this button
add to collection and what that does it sort of adds it to my shopping cart.
And then the next one I'm going to pick.
Let's go for another very different one.
Let's try this Andy Flower ad to collection.
So the next thing I want to do is click on this use tab.
So what I've said is I want both of these fonts.
Now click on use and now I need to decide which font weights I want available.
So different fonts have different weights that are available on Google fonts so you can see railway
has every single possible option between 100 and ultra bold at 900.
One thing to pay attention to is you don't want to include more than you're going to use and this little
meter over here reminds you of the page load the effect on page of that including multiple weight will
have and that's because every single font and weight that you include is another request that needs
to be made its more data that needs to be loaded.
So what we want to do here is just minimize the number that we need to understand to use normal and
bold for a railway.
And then I don't have an option for Andy Flower.
There's only one weight which is normal.
So now that I've selected those I scroll down and all I have to do is copy this link right here.
So this is a link they put in my HMO.
When I go to my HQ here and just paste it in and safe and you can look at the you are well here and
you'll notice it's almost the same words exactly the same type of tag it's a link tag.
The only difference between my style sheet and this style sheet is the ref.
So rather than styles that CSSA my custom local style sheet it's on Google dot com or Fahnestock Google
API celcom.
And we have family equals railway wait for 107 100.
Andy Flower.
So suppose I did want a bold I could just easily go here net eight hundred.
OK.
So that is all we have to do to get the font.
It's so so easy to do.
The next step is to use it.
So I'm going to go ahead and just show you what it looks like right now in case you forgot.
Wonderful site.
Let's start by changing this H-1.
Let's make the H-1 use the indie flower font.
So I'm just going to change it here.
H-1 and have fun family as Georgia.
I just change it to Andy Flower and that's it.
Very very easy refresh and you can see it's now.
And if I were same thing to use railway on paragraphs.
I just changed the font family to railway save and refresh and I now have this new fun here.
The other thing we can do is change our paragraph to use the other font weight.
So we got to remember let's just go with normal.
It looks a lot better doesn't look very good either way but I prefer the lighter weight rather than
the Bold.
So again Google fonts is a great great resource.
One thing though I'll mention is if you do have fonts that you own all you have to do to link to them
is use it like tag.
So rather than linking to one of Google's fonts you just link to your own font file so you can read
more NTN about this specific font file types that are supported.
But basically it works the same way except rather than including a Google fund.
You can include your own custom font.
Luckily though Google fonts has all sorts of great fonts.
You can make awesome websites and plenty of people use Google fonts exclusively even for professional
web sites.