GoSkills
Help Sign up Share
Back to course

Fonts

Compact player layout Large player layout

Subscriber only lesson.

Sign up to the Introduction to CSS course to view this lesson.

View pricing

  • Lesson resources
  • Quick reference
  • Transcript
  • Notes

About this lesson

How to manipulate the font family, boldness, style, and size, of text.

Exercise files

Download this lesson’s related exercise files.

Fonts.docx
199.2 KB
Fonts - Solution.docx
200.8 KB

Quick reference

Fonts

There are lots of things we can do to fonts with CSS.

When to use

You can use fonts when we want to use different fonts, or make them bold or italic, or change their size.

Instructions

To use a different font:

font-family: "Arial";

To make a font italic or oblique:

font-style: italic;
font-style: normal;
font-style: oblique;

To make a font bold:

font-weight: bold;

To change a font's size:

font-size: 30px;

Hints & tips

  • font-size: 30px; 
  • font-weight: bold; 
  • font-style: italic;
    font-style: normal;
    font-style: oblique;
  • font-family: "Arial";
  • 00:05 Okay, in this video, I wanna talk about fonts.
  • 00:07 Now this is just a regular default font, I think its Times New Roman.
  • 00:11 We can change this very easily with CSS using the font family tag.
  • 00:15 So it's just font-family and then quotation marks.
  • 00:19 And then you just type in the family name that you want.
  • 00:21 So we can go Arial, for instance, and save this, hit reload, boom, we get Arial.
  • 00:27 We can change this to Courier New, save it, hit reload, boom.
  • 00:33 So there are a lot of default fonts you can use.
  • 00:36 Arial is sort of popular.
  • 00:37 You can download fonts and
  • 00:39 install them into your index page with link rel type of style sheets.
  • 00:43 You can download fonts from Google, you can use Google fonts and tags for that,
  • 00:46 all kinds of stuff.
  • 00:47 I'm not gonna go through all the different fonts.
  • 00:49 There's thousands and thousands of them.
  • 00:51 But this is a very easy way to change the font that you wanna use.
  • 00:56 Now another way that you can play around with fonts is with the style.
  • 00:59 We can do italics, we can do oblique, and well, let's just kind of look at this.
  • 01:04 We do that using the font-style, and we can go, let's say, italics, italic.
  • 01:12 Save this, reload, boom, it sort of leans a little bit, we can go normal.
  • 01:18 Sometimes you want to designate normal.
  • 01:20 That's just normal.
  • 01:21 But we could go, Oblique, so sorta like italics.
  • 01:28 And that's pretty much font style.
  • 01:29 We can do, let's get rid of this guy.
  • 01:32 We could do font-size, and let's go 30 pixels.
  • 01:38 It shrinks it a little bit.
  • 01:40 Let's go 300 pixels, boom, huge.
  • 01:45 So font size.
  • 01:50 It's already slightly big because the h1 tag, by default, makes text large.
  • 01:55 But if you wanna change it, the defaults, you can do font-size.
  • 01:58 You can also use something, instead of px, you can use 2.5em.
  • 02:03 And is just a unit of measure.
  • 02:09 Then we can change this to 5.5, makes it a little bit bigger.
  • 02:12 And nobody understands the nobody uses it, you're just gonna use pixel.
  • 02:16 But I just wanted to sort of let you be aware of that.
  • 02:19 So another thing we can do is change the font weight.
  • 02:23 And we can change this to bold.
  • 02:27 And you see there's bold, bolder, lighter, normal, and then some ranges.
  • 02:33 Usually you're gonna use bold for something like this.
  • 02:35 And in this case, our text is already bold because we're using an h tag.
  • 02:40 Let's go ahead and put this in our p, and save this and come back here.
  • 02:44 And wrap this in a p and say hello world 2.
  • 02:49 Save this, hit reload down here, we get this like that.
  • 02:53 Now if we come back and remove the bold font weight, save this, reload, boom.
  • 03:00 You can see it's not bold anymore.
  • 03:02 So the bold one is pretty useful.
  • 03:03 So that's fonts, font, font-family, font-size, font-style.
  • 03:07 Font-weight, you'll use those an awful lot, I use font-weight a lot.
  • 03:11 Yeah, so that's all for this video.

Lesson notes are only available for subscribers.

Text Formatting
5m:03s
Links
4m:08s
Share this lesson and earn rewards Google+ Facebook Twitter LinkedIn
Gift this course
Give feedback

How is your GoSkills experience?

I need help

Your feedback has been sent

Thank you

Back to the top

© 2018 GoSkills Ltd. Skills for career advancement