1 00:00:00,350 --> 00:00:05,460 In this video we're going to talk about ways of including custom fonts and using them in our success 2 00:00:05,940 --> 00:00:11,550 so that we don't have to rely on these built in fonts the system fonts like Arial and Georgia that are 3 00:00:11,550 --> 00:00:13,340 not very reliable in the first place. 4 00:00:13,350 --> 00:00:18,150 Some people's machines won't have them and they're pretty limited even if all of them are available 5 00:00:18,150 --> 00:00:18,440 . 6 00:00:18,450 --> 00:00:21,700 It's not many fonts and it's not many good fonts. 7 00:00:21,930 --> 00:00:27,660 So luckily it's pretty easy to include her own fonts and that can be a font that we own that we've purchased 8 00:00:27,660 --> 00:00:32,550 that our company owns although they can get very very expensive if you've never looked into font pricing 9 00:00:32,550 --> 00:00:32,850 . 10 00:00:32,850 --> 00:00:36,120 Some of the better ones can cost hundreds of thousands of dollars. 11 00:00:36,120 --> 00:00:40,820 So Google has an option out there it's called Google fonts and it's a really great resource. 12 00:00:40,980 --> 00:00:48,420 Basically Google has a bunch of I think it's about 100 fonts online for free that are very easy to include 13 00:00:48,450 --> 00:00:49,540 in our own application. 14 00:00:49,620 --> 00:00:50,710 Just a few clicks. 15 00:00:50,790 --> 00:00:52,940 So I'm going to show you how to do that now. 16 00:00:53,910 --> 00:01:01,140 So if we go to Google fonts and just Google dot com slash fonts you'll see we're immediately presented 17 00:01:01,140 --> 00:01:04,760 with a list of fonts here we can scroll through them. 18 00:01:05,040 --> 00:01:09,520 We can sort them by popularity alphabetical most recent. 19 00:01:09,660 --> 00:01:12,220 We can change the preview text that we're looking at. 20 00:01:12,780 --> 00:01:14,440 Usually it just keep it how it is. 21 00:01:14,850 --> 00:01:20,490 And I'm actually going to just pick two fonts here that are very distinct so don't judge me based off 22 00:01:20,490 --> 00:01:21,550 of which ones they pick. 23 00:01:21,600 --> 00:01:26,310 They may not be my favorite but they're just going to be obvious so that you can see that they're different 24 00:01:26,320 --> 00:01:26,940 . 25 00:01:27,600 --> 00:01:35,190 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 26 00:01:35,250 --> 00:01:39,890 add to collection and what that does it sort of adds it to my shopping cart. 27 00:01:40,260 --> 00:01:41,770 And then the next one I'm going to pick. 28 00:01:41,910 --> 00:01:45,390 Let's go for another very different one. 29 00:01:46,230 --> 00:01:49,800 Let's try this Andy Flower ad to collection. 30 00:01:50,220 --> 00:01:53,120 So the next thing I want to do is click on this use tab. 31 00:01:53,280 --> 00:01:55,640 So what I've said is I want both of these fonts. 32 00:01:55,710 --> 00:02:01,430 Now click on use and now I need to decide which font weights I want available. 33 00:02:01,800 --> 00:02:06,390 So different fonts have different weights that are available on Google fonts so you can see railway 34 00:02:06,390 --> 00:02:11,740 has every single possible option between 100 and ultra bold at 900. 35 00:02:11,760 --> 00:02:16,790 One thing to pay attention to is you don't want to include more than you're going to use and this little 36 00:02:16,800 --> 00:02:22,230 meter over here reminds you of the page load the effect on page of that including multiple weight will 37 00:02:22,230 --> 00:02:27,270 have and that's because every single font and weight that you include is another request that needs 38 00:02:27,270 --> 00:02:29,930 to be made its more data that needs to be loaded. 39 00:02:30,360 --> 00:02:36,000 So what we want to do here is just minimize the number that we need to understand to use normal and 40 00:02:36,000 --> 00:02:37,400 bold for a railway. 41 00:02:37,450 --> 00:02:39,520 And then I don't have an option for Andy Flower. 42 00:02:39,540 --> 00:02:42,150 There's only one weight which is normal. 43 00:02:43,260 --> 00:02:49,360 So now that I've selected those I scroll down and all I have to do is copy this link right here. 44 00:02:49,740 --> 00:02:53,130 So this is a link they put in my HMO. 45 00:02:53,970 --> 00:03:01,380 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 46 00:03:01,380 --> 00:03:06,700 you'll notice it's almost the same words exactly the same type of tag it's a link tag. 47 00:03:07,020 --> 00:03:12,340 The only difference between my style sheet and this style sheet is the ref. 48 00:03:12,390 --> 00:03:19,230 So rather than styles that CSSA my custom local style sheet it's on Google dot com or Fahnestock Google 49 00:03:19,230 --> 00:03:20,560 API celcom. 50 00:03:20,850 --> 00:03:25,210 And we have family equals railway wait for 107 100. 51 00:03:25,460 --> 00:03:26,650 Andy Flower. 52 00:03:27,150 --> 00:03:32,950 So suppose I did want a bold I could just easily go here net eight hundred. 53 00:03:33,880 --> 00:03:34,130 OK. 54 00:03:34,140 --> 00:03:36,260 So that is all we have to do to get the font. 55 00:03:36,270 --> 00:03:38,430 It's so so easy to do. 56 00:03:38,550 --> 00:03:40,170 The next step is to use it. 57 00:03:40,500 --> 00:03:45,170 So I'm going to go ahead and just show you what it looks like right now in case you forgot. 58 00:03:45,180 --> 00:03:46,360 Wonderful site. 59 00:03:46,650 --> 00:03:49,490 Let's start by changing this H-1. 60 00:03:50,310 --> 00:03:53,370 Let's make the H-1 use the indie flower font. 61 00:03:53,760 --> 00:03:55,370 So I'm just going to change it here. 62 00:03:55,390 --> 00:03:58,200 H-1 and have fun family as Georgia. 63 00:03:58,240 --> 00:04:02,690 I just change it to Andy Flower and that's it. 64 00:04:02,790 --> 00:04:06,110 Very very easy refresh and you can see it's now. 65 00:04:06,120 --> 00:04:11,260 And if I were same thing to use railway on paragraphs. 66 00:04:11,610 --> 00:04:20,670 I just changed the font family to railway save and refresh and I now have this new fun here. 67 00:04:20,670 --> 00:04:25,960 The other thing we can do is change our paragraph to use the other font weight. 68 00:04:26,040 --> 00:04:30,670 So we got to remember let's just go with normal. 69 00:04:30,840 --> 00:04:35,970 It looks a lot better doesn't look very good either way but I prefer the lighter weight rather than 70 00:04:35,970 --> 00:04:37,530 the Bold. 71 00:04:37,530 --> 00:04:40,650 So again Google fonts is a great great resource. 72 00:04:40,650 --> 00:04:45,990 One thing though I'll mention is if you do have fonts that you own all you have to do to link to them 73 00:04:46,320 --> 00:04:47,490 is use it like tag. 74 00:04:47,880 --> 00:04:53,520 So rather than linking to one of Google's fonts you just link to your own font file so you can read 75 00:04:53,520 --> 00:04:57,890 more NTN about this specific font file types that are supported. 76 00:04:58,110 --> 00:05:02,840 But basically it works the same way except rather than including a Google fund. 77 00:05:02,940 --> 00:05:04,630 You can include your own custom font. 78 00:05:04,980 --> 00:05:08,260 Luckily though Google fonts has all sorts of great fonts. 79 00:05:08,430 --> 00:05:14,100 You can make awesome websites and plenty of people use Google fonts exclusively even for professional 80 00:05:14,100 --> 00:05:15,000 web sites.