Skip to main content

Installing Google Fonts

Lesson 44 from: Build a Responsive Website Using HTML5 & CSS3

Daniel Walter Scott

Installing Google Fonts

Lesson 44 from: Build a Responsive Website Using HTML5 & CSS3

Daniel Walter Scott

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

Lesson Info

44. Installing Google Fonts

Lessons

Class Trailer

Getting Started

1

How This Class is Structured

01:41
2

What to Download

02:57

Introduction to HTML & CSS

3

Creating Our First Webpage

05:55
4

What is HTML5 & CSS3

08:24
5

Head vs. Body vs. Html Tag

09:01
6

Title & Description

05:54
7

What Code Editor Should I Use

02:42
8

Using Diy Tags

06:26
9

What is a CSS Class

09:05
10

How to Create Nested Divs

05:03
11

Class Project

05:24
12

External CSS

09:07
13

Creating Our Index Style Pages

12:16

Project 1: Restaurant Website

14

Testing Your Website

08:47
15

Check Your Code For Errors

11:01
16

What are HTML5 Structure Tags

05:47
17

Add HTML5 structure elements

16:02
18

How to Set the Color of the Background

05:10
19

Adding Images to a Website

04:38
20

How to Center an Image

01:14
21

Change the Font Size & Color

14:11
22

Make a Clickable Link

08:45
23

Stretching Background Image

05:38
24

Making a Div Tag Transparent

02:36
25

Simple Website Text Navigation

06:43
26

CSS Compound Classes

07:02
27

Class Project 02

02:05
28

Class Project 02 - COMPLETE

04:48
29

Add an Email Button to a Website

03:49
30

Add Google Maps to Your Website

11:25
31

Making a Website Live

16:50
32

Uploading via SFTP

11:50
33

Setting Up Our New Project

03:46

Project 2: Bike Repair Website

34

CSS Reset

15:22
35

Min-height vs. Height

07:01
36

Div Tags Onto One Line

05:23
37

Getting div tags onto one line using Flexbox in HTML & CSS

05:23
38

Evenly Spaced Div Tags

04:42
39

Two Div Tags of Different Sizes

07:13
40

Vertically Center Content

07:20
41

Class Project 3

02:51
42

Class Project 3 - COMPLETE

05:39
43

Change Default Fonts

04:19
44

Installing Google Fonts

12:44
45

What are PX & EM & REM

14:56
46

Change Line Height

04:33
47

SVG vs. JPG vs. PNG

07:04
48

How to Create a SVG, JPG, or PNG

11:00
49

Block Images vs. Background Images

08:32
50

Finishing Up Our Cards

09:10
51

Icons via Font Awesome

16:31
52

Making a Div Container Clickable

09:55
53

Box-sizing & Border-box

06:19
54

How to Make A Colored Button

07:46
55

Why Can't I Add Margin or Paddding

11:08
56

Rounded Corners

04:17
57

Drop Shadows

06:24
58

Backup Your Website

05:00
59

Reusing a Button Class

03:10
60

Class Project 04

02:58
61

Class Project 04 -COMPLETE

05:45
62

Adding a Horizontal Rule

03:51
63

Make Divs Wrap Onto Separate Lines

12:14
64

Hover Color & Animating a Button

03:33
65

Pseudo Classes

09:31
66

Simple Dropdown Navigation

20:04
67

Adding Our Dropdown to the Website

14:50
68

Useful Shortcuts and Tips in VS Code

13:28
69

Large Background Image

09:24
70

How to Connect 2 Pages

10:42
71

Simple PHP Form Work

17:49
72

Placeholder Form Text

05:46
73

Multi Line Form Text Box

02:18
74

Form Check Marks

03:04
75

Form Radio Button

06:07
76

Form Drop Down Menu

05:48
77

How to Style Your Form

12:55

Project 3: Responsive Portfolio Website

78

What does responsive website design mean

04:17
79

How to change a website layout size color when at different sizes using media queries

11:28
80

How to test your website on a tablet or mobile phone from Visual Studio Code

06:00
81

How to change the layout of a responsive website for mobile vs desktop

16:02
82

How to turn things on and off for mobile tablet & desktop responsive websites

06:03
83

What is pixel density responsive images pixel ratio dp px in webdesign

14:47
84

How to export responsive images for website from XD Photoshop Illustrator

05:11
85

How to add responsive images to website using 100% width in HTML & CSS

06:08
86

How to use srcset to change images in HTML for responsive website

10:15
87

How to add a css style to the first line of a p tag on a website (

11:18
88

How to make the header footer full width but the inside centered

05:36
89

Class Project 05 – Header design

03:12
90

Class Project 05 – Header design COMPLETE

06:25
91

How to use a span tag or span class in HTML to change text

10:32
92

How to pin the navigation to the top of a website fixed nav

03:17
93

How to make a simple responsive mobile menu using CSS only

08:21
94

What is Javascript vs Jquery in website web design

06:35
95

How to make a burger menu 3 line mobile navigation for a website

15:11
96

How to switch a menu nav from desktop to mobile phone

21:45

Project 4: Bootstrap Yogurt Website

97

Overview of what Bootstrap 4 is in website design

07:57
98

How to install Bootstrap 4 on a website using Visual Studio Code

06:27
99

Quick overview of how the Bootstrap Grid Layout works in VS Code

10:49
100

Quick overview of how Bootstrap Components works in VS Code

09:23
101

Quick overview of how Bootstrap CSS Styles works in VS Code

08:20
102

How to customize the default Bootstrap 4 css styles

13:51
103

How to use Bootstrap Layout Grid Experiment 1

10:20
104

How to make 100% header & uneven widths in Bootstrap 4

07:16
105

How to create uneven col widths in Bootstrap 4

07:27
106

How to add padding & margins using Bootstrap 4 in VS Code

12:03
107

How to change layout of Bootstrap depending on mobile or desktop

15:46
108

How to turn things on & off on your website using Bootstrap 4

05:30
109

Google Chrome Inspect

12:40
110

Add Shadows to Text & Boxes

07:06
111

Change the Default Buttons

06:16
112

Responsive Images in Bootstrap 4

09:34
113

How to Center Text & Div Tags

04:16
114

Customize the Bootstrap Navbar

07:29
115

Add Your Own Logo

03:58
116

Change the Default Nav Styles

12:12
117

Fix the Navigation to the Top

04:41
118

Col Images & Col Background

07:56
119

Bootstrap Border & Rounded Corners

04:20
120

Bootstrap 4 Carousels

05:13
121

Card Groups

03:29
122

Drop Shadows On Bootstrap Cards

02:25
123

Clickable Boxes in Bootstrap 4

04:02

Final Quiz

124

Final Quiz

Lesson Info

Installing Google Fonts

Alright. It's time to go from boring old Ariel to play fair and Roberto. You may not be as excited as I am, but it's painful. This class is dealing with the real basic fonts for a long time now we get to do pretty fonts. We're going to use something called google fonts. I'm going to show you how to pick them, how to embed them and get the code going as well as kind of ways of how to pick fonts and how to style them to get some inspiration. Alright enough cheddar. More doing, I'll see you in the video. Alright to get started with google fonts, first of all, why are we using google fonts? So, fonts dot google dot com. There are competitors, font squirrel 1001 font style font. There's competitors to it. All you need to do is make sure that it's a font that is hosted for you to use on a website. It's different from fonts that you download to use on your machine. Okay? If you go to Yeah. Dot font and download a free font. It's not something you can use on your website has to be something th...

at is kind of lives in the internet and a good place to find them is something like fonts dot google dot com. The free and I go through kind of how I pick the styles and fun pairing and a few other things after we do the real basics of how to put it in and code because that's that might be all you're here for so I'm going to use a couple of fonts. So up here in the search, I'm gonna type in Roboto. I'm not because it's right there. You might have to type it in. Okay. And click on plus. Okay, that gets added to this little down here. This little fonts selected my little group of fonts that are going to use on my website. The other one I want is up here. It's going to be play fear. Is it two words? No, I gotta spell playwright, brain working. So it's play fair. It's one word. You can see that I'm using just the Playfair display. I'm going to add it. Cool. So we headed down here, that doesn't do much. Let's hit this little button to open it up. Cool. And what we want to do now is we want to customize. Okay, so the moment let's say play fair. There it is there. And Roboto at the moment it's only going to load one version of that font. Okay, now you've got to decide based on your design and that's really important when you are like using a program to design your website, say it's like this XD or sketch or illustrator or Photoshop you using loads of different fonts is going to be a bit painful when your site has the load. Okay, so at the moment I've only got one size. It is the regular size that I've used in my design down here where it gets to the body copy, I've used Roboto and I've used the light version and I haven't used anything else. Okay, but you'll probably find you might need to use a bold as well, maybe an italic. And the only trouble with that or the thing to be concerned about is say I do need the bold version and the regular italic, you can see this thing here saying, hey, you're website is going to be taking a moderate time to load. That's why you're orange down here and you say actually I want regular and I've got light and I want medium as well. And if it's bold you can see here bad, it's gone red and said your website is going to take forever to load. And why is that bad? It's bad for the user in general. Okay. So the person goes to your side and it takes ages to load because of the fonts and that's probably not going to be worth it or at least a consideration. You need to keep in mind. The other thing is that google uses page speed or load speed is one of its search algorithm ticks. It's not the only thing, but it's one of the things to consider if you if you're building a site that really needs to rank well in google results, which most sites do you just need to make sure you're not killing yourself by putting too many fonts on there. Okay, so I've got at the moment just the regular and I just need the light version and I probably really bold at some stage because my site is not very big at the moment. It's not really got to that point, but let's just keep it light. Alright, so we've customized it, we want it now, we need to add it to our site. And the cool thing you can do just while we're here is no, I'll cover that a little bit. Let's add it to the site, click on in bed. So like we did when we imported that google map, it's really easy. They do all the work for you. You grabbed this bit and you copy it. I'm using command C on my Mac control C on a Pc and it says put this in your head. Well I can do that. So let's copy it over here in visual studio code. But here's our head tag opens, closes. Where's it gonna go? I'm gonna paste it into the bottom there. They don't say where to put it. So I'm just gonna paste it there. You can kind of see what it's added. It says, hey, when this page loads, go get the fonts, Okay, these fonts, I want to get font Roboto and play fair and the weights. I want you to download this one that must be for both of them. Okay, So Oh and the other one is called display. So you can change these, say later on, you're like, actually I don't want to use that. I want to use the 500. Okay, Which is the heavier font you'll notice that they don't use, They say bold, but the code refers to it as 700. Okay, so if I wanted 700 now and not the 300, I can just add it there rather than going back to Google and trying to customize it again. Alright, so it's half added, you added to the HTML and then you've got to add it to where you want it to apply. So in our case we've got my body copy, I would like it all to be Roboto the moment I've got it set to aerial. So it's going to go in here and grab the embed and we're going to find so that in the head, this in the CSS and I'm gonna grab the Roboto one copy all of that and just replace all of this. Nice save now and hopefully in my browser that is now Roboto. And you're like, it doesn't look much different from aerial. It is so good, Roberto's are, it's like the most generic other open sands. Source sands and Roberto are the body copy for online. Okay, It's the most commonly used one. Let's apply a little bit more one that's a little bit more specific or at least a bit more visually different. So is this play fair, Click copy and I'm going to add it to my site. I'm going to do my H1. Okay, sit down here. Do paste it in save it preview. Look at that play fair. The margins all messed up. We'll play around with those soon. But that's how to implement it, dump it into the head and then add it to the CSS. Now I said I'll show you how I pick fonts and this is a bit more like just creative like how I go and pick my fonts. So nothing technical you're gonna learn here so you can speed off to the next video if you're hurrying. But if not hang around, let's talk about because I'm doing this design process. Right? So I'm using adobe XD. You could be using something like, I don't know, power point if that's where your skills are or Photoshop to do web design illustrator to do web design. I've got courses on all of these. If you want to go check those out. But let's say that you're using XD and you're not going to have Roboto or play fair on your computer. Okay to actually start using Okay, but you want to mock it up on your actual design before you go and implement it to the website. So what you do is in the same place and google fonts. You get to the exact same bit. You go all right, I want to download all of these and you add them to the group like we did. And at the top here. Okay, at the top of this. Little see the little arrow here. That was the thing I was gonna try and show you earlier on but we separated out click on this and the cool thing about it is that will download those fonts onto your computer and you can double click them, open them up and they will install and they're free to use their real cool, it's a good way of getting free fonts. Okay, what you might do if you're downloading them for your own computer, is actually go into customize and go through and just take them all and the cool thing about them is you can use them for graphic design as well as web design. Okay, so yeah, just a great resource for fonts. So you know how to download them. Let's talk about how to pick them and what kind of depict styles. So we're gonna go back to google fonts. I'm just clicking on the logo here. Google itself has some nice features. Okay, whereas say we're doing some headings and I want to find some heading fonts display is the general term for like a little bit more creative headings, font. So you can go through this april I like him and you know, and find the thing that's going to work for you. Okay, Same with body copy, you're either going to do a serif or sans serif. Okay. One the difference is a serif font is like times roman. It has all the extra little feet on the ends. Those are called serif. And sans serif is without feet. Okay, so it's kind of a more common one. And a really easy thing to do. Like a real this is not going to be font 101, but a real basic way to pick fonts for your site is to always pick an opposite. So if your headings are a serif font, Okay, pick a sans serif, body copy that kind of there's enough of a visual change in them to It's a really good starting point. It's very hard to get to serif fonts. Okay. To be the heading and the body copy font, because often the changes aren't big enough to have a nice visual kind of distinction between the two. So a nice easy way is to yeah, one For the title and then one for the body copy. Another rule is just pick two fonts or one font can work if there's enough of a so a sans serif font like Roboto you could use for the whole site. Why? Because there is a bunch of different sizes for it. Okay, so the blacks, really heavy and very distinctive. So you could use that for the headings and then use the medium or the regular for the body copy. That will work fine. To some of these fonts just don't have a lot of variety. Okay, they might only have a couple of sizes. Another thing you can do in here, is that the placeholder text in here? You can actually click on it. Okay, you can't open my name. Okay. Say you're doing a design for somebody and you need to apply to all fonts. Okay? Because sometimes you download a font, right, and you're like, that looks awesome. And then you download it and actually type in your letters and you're like, man, it looks lame, you know, look good on the line, but when you downloaded it it doesn't look good. So you can you can do it all here, play with the sizes and the weights and that's kind of fun. Other things you can do when you are picking say, especially a heading font. Okay. For our design here, it's not too bad. We've got we've got three words across the top but our side is quite small. Let's say you're doing a site and it's full of blog posts or articles or recipes or I don't know. And but you're gonna have lots of varying sizes or lengths of titles. Okay. Some might be just 20 characters and some might be 40 characters, it's really handy. You don't have to but it's a consideration. I definitely take into account is to do with the width. Okay, if I drag this turn width on and I drag it down, I'm going to give myself access to let's turn these all on. I'm going to give my access myself access to fonts that are just thinner. Okay. And you can just get more on the line to say this one here or this one here and they're not all great. Okay. But let's say we do like, let's go up one more to get a bit more variety. Doesn't really matter Dan. Just pick one. See this one here instead of using the one we're using Playfair. This one here has the potential of fitting more characters on a line and not breaking into two. Okay, so with is uh something to look at, but let's say you're just like, I don't, I still don't know how to pick up and use the term font pairings pairings is a really useful term. Okay. I just put in google font pairings and I put in today's this year's date. Okay. Because yeah, there's some old stuff around and I just wanted contemporary stuff. Okay, do a search for that. I clicked on the top two results. Don't worry about these websites do the same sort of thing. And to see where you're at 2020 and you can see the cool thing about font pairings is that somebody, you know, in this case it is Debbie morrigan, she's gone through and picked fonts that go nicely together and put them in situ, which I really like because yeah, you can get some cool design ideas and she's picked. You can see serif sans serif serif sans serif. It's not always true, but kind of a can see sand served served and font pairings you can just go all right, I'm gonna use railway and later. Okay. And all of these two or combinations of them all you pick your own, but it's just handy to find other people. Cool. I really like this one. I've never seen that one before. Alright, so font pairings handy. Google fonts is a place, it's the main place. There are other options for this Dobie do it, font squirrel does it. There's a few other places that do free fonts or even paid fonts, but to implement them, it's super easy. Just add the code to the head tag and then add it to your CSS of the thing you want to style. Alright, buddies, that was it for fonts, our websites and I look a little nicer now with our gradient and our fonts. I'll see you in the next video

Class Materials

Bonus Materials with Purchase

Exercise Files
Completed Files

Ratings and Reviews

Viwosoft Technologies
 

Great tutorial - your clear instructions and concise explanations make learning HTML5 & CSS3 a breeze!

Student Work

RELATED ARTICLES

RELATED ARTICLES