Installing Google Fonts
Daniel Walter Scott
Lessons
How This Class is Structured
01:41 2What to Download
02:57 3Creating Our First Webpage
05:55 4What is HTML5 & CSS3
08:24 5Head vs. Body vs. Html Tag
09:01 6Title & Description
05:54What Code Editor Should I Use
02:42 8Using Diy Tags
06:26 9What is a CSS Class
09:05 10How to Create Nested Divs
05:03 11Class Project
05:24 12External CSS
09:07 13Creating Our Index Style Pages
12:16 14Testing Your Website
08:47 15Check Your Code For Errors
11:01 16What are HTML5 Structure Tags
05:47 17Add HTML5 structure elements
16:02 18How to Set the Color of the Background
05:10 19Adding Images to a Website
04:38 20How to Center an Image
01:14 21Change the Font Size & Color
14:11 22Make a Clickable Link
08:45 23Stretching Background Image
05:38 24Making a Div Tag Transparent
02:36 25Simple Website Text Navigation
06:43 26CSS Compound Classes
07:02 27Class Project 02
02:05 28Class Project 02 - COMPLETE
04:48 29Add an Email Button to a Website
03:49 30Add Google Maps to Your Website
11:25 31Making a Website Live
16:50 32Uploading via SFTP
11:50 33Setting Up Our New Project
03:46 34CSS Reset
15:22 35Min-height vs. Height
07:01 36Div Tags Onto One Line
05:23 37Getting div tags onto one line using Flexbox in HTML & CSS
05:23 38Evenly Spaced Div Tags
04:42 39Two Div Tags of Different Sizes
07:13 40Vertically Center Content
07:20 41Class Project 3
02:51 42Class Project 3 - COMPLETE
05:39 43Change Default Fonts
04:19 44Installing Google Fonts
12:44 45What are PX & EM & REM
14:56 46Change Line Height
04:33 47SVG vs. JPG vs. PNG
07:04 48How to Create a SVG, JPG, or PNG
11:00 49Block Images vs. Background Images
08:32 50Finishing Up Our Cards
09:10 51Icons via Font Awesome
16:31 52Making a Div Container Clickable
09:55 53Box-sizing & Border-box
06:19 54How to Make A Colored Button
07:46 55Why Can't I Add Margin or Paddding
11:08 56Rounded Corners
04:17 57Drop Shadows
06:24 58Backup Your Website
05:00 59Reusing a Button Class
03:10 60Class Project 04
02:58 61Class Project 04 -COMPLETE
05:45 62Adding a Horizontal Rule
03:51 63Make Divs Wrap Onto Separate Lines
12:14 64Hover Color & Animating a Button
03:33 65Pseudo Classes
09:31 66Simple Dropdown Navigation
20:04 67Adding Our Dropdown to the Website
14:50 68Useful Shortcuts and Tips in VS Code
13:28 69Large Background Image
09:24 70How to Connect 2 Pages
10:42 71Simple PHP Form Work
17:49 72Placeholder Form Text
05:46 73Multi Line Form Text Box
02:18 74Form Check Marks
03:04 75Form Radio Button
06:07 76Form Drop Down Menu
05:48 77How to Style Your Form
12:55 78What does responsive website design mean
04:17 79How to change a website layout size color when at different sizes using media queries
11:28 80How to test your website on a tablet or mobile phone from Visual Studio Code
06:00 81How to change the layout of a responsive website for mobile vs desktop
16:02 82How to turn things on and off for mobile tablet & desktop responsive websites
06:03 83What is pixel density responsive images pixel ratio dp px in webdesign
14:47 84How to export responsive images for website from XD Photoshop Illustrator
05:11 85How to add responsive images to website using 100% width in HTML & CSS
06:08 86How to use srcset to change images in HTML for responsive website
10:15 87How to add a css style to the first line of a p tag on a website (
11:18 88How to make the header footer full width but the inside centered
05:36 89Class Project 05 – Header design
03:12 90Class Project 05 – Header design COMPLETE
06:25 91How to use a span tag or span class in HTML to change text
10:32 92How to pin the navigation to the top of a website fixed nav
03:17 93How to make a simple responsive mobile menu using CSS only
08:21 94What is Javascript vs Jquery in website web design
06:35 95How to make a burger menu 3 line mobile navigation for a website
15:11 96How to switch a menu nav from desktop to mobile phone
21:45 97Overview of what Bootstrap 4 is in website design
07:57 98How to install Bootstrap 4 on a website using Visual Studio Code
06:27 99Quick overview of how the Bootstrap Grid Layout works in VS Code
10:49 100Quick overview of how Bootstrap Components works in VS Code
09:23 101Quick overview of how Bootstrap CSS Styles works in VS Code
08:20 102How to customize the default Bootstrap 4 css styles
13:51 103How to use Bootstrap Layout Grid Experiment 1
10:20 104How to make 100% header & uneven widths in Bootstrap 4
07:16 105How to create uneven col widths in Bootstrap 4
07:27 106How to add padding & margins using Bootstrap 4 in VS Code
12:03 107How to change layout of Bootstrap depending on mobile or desktop
15:46 108How to turn things on & off on your website using Bootstrap 4
05:30 109Google Chrome Inspect
12:40 110Add Shadows to Text & Boxes
07:06 111Change the Default Buttons
06:16 112Responsive Images in Bootstrap 4
09:34 113How to Center Text & Div Tags
04:16 114Customize the Bootstrap Navbar
07:29 115Add Your Own Logo
03:58 116Change the Default Nav Styles
12:12 117Fix the Navigation to the Top
04:41 118Col Images & Col Background
07:56 119Bootstrap Border & Rounded Corners
04:20 120Bootstrap 4 Carousels
05:13 121Card Groups
03:29 122Drop Shadows On Bootstrap Cards
02:25 123Clickable Boxes in Bootstrap 4
04:02 124Final 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
Ratings and Reviews
Viwosoft Technologies
Great tutorial - your clear instructions and concise explanations make learning HTML5 & CSS3 a breeze!
Student Work
Related Classes
Branding