Preview
Text and Fonts
7:32Discover font-related CSS properties, the power of font stacks, and importing Google Fonts. Explore text styling techniques and apply them practically by aligning headers and footers, adjusting heading sizes, and enhancing text readability with increased line-height.
Update!
Google Fonts has updated their website since the recording of this video. Please follow the instructions below to add the font to your website.
Step 1
Visit fonts.google.com and search "Playpen Sans". There should only be one result, so click through to that page.
Step 2
Click the "Get font" blue button. It should be either on the top right or bottom right of the page.
Step 3
Click the "Get embed code" blue button. This will generate the code you need to add the font to your website.
Step 4
Make sure the Web tab is selected and click on the "@import" radio button. Instead of importing a couple of font weights we'll now import all of the font weights by making sure the "Full axis" weight option is selected.
Step 5
Copy the "@import url(..)" from the top section and paste it to the top of the styles.css file. You can also copy the code snippet below.
@import url('https://fonts.googleapis.com/css2?family=Playpen+Sans:wght@100..800&display=swap');
Step 6
Back to the Google Fonts page, copy over the "font-family" line of code in the second section and paste it in the body selector as shown in the video at 07:32.
font-family: "Playpen Sans", cursive;
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
We've had a look at the mockup
a few times at this stage, and
0:00
I'm sure you've noticed
by now that the font or
0:03
typeface is different from what
we've been seeing on our webpage.
0:05
In this video, we'll jump into
the captivating world of text and
0:10
fonts in CSS.
0:14
Let's begin by exploring some
fundamental font-related CSS properties.
0:16
Font family, the font family property
allows you to specify the typeface or
0:21
font for your text.
0:26
It's a pivotal element in establishing
the overall style of your website's text,
0:28
for example, font-family sans-serif,
will give us a modern sans-serif font.
0:33
Font size, the font size property is all
about controlling the size of your text.
0:40
It's a critical factor in
setting the readability and
0:45
visual hierarchy of your content.
0:48
From small text for
fine print to large headings for emphasis,
0:51
font size is a powerful tool.
0:56
For example, font size 72 pixels,
we'll set our text to 72 pixels.
0:58
Font weight, font weight enables
you to determine the thickness or
1:05
weight of your text.
1:09
This property is key to creating contrast
and emphasis within your content.
1:10
Whether it's a light,
regular, or bold weight,
1:16
it can affect the visual appeal and
impact of your text.
1:20
For example,
font-weight bold will embolden the font.
1:23
Next, we'll explore
the concept of a font stack.
1:28
In the context of CSS, a font stack
is a list of fonts that a web browser
1:31
should apply in order of preference.
1:36
This ensures that if a particular font
isn't available on a user's device,
1:40
an appropriate alternative is used.
1:44
Font stacks are crucial for
ensuring consistent and
1:47
legible text across various platforms.
1:51
For example, we may want to use
Havetica Neue for our website.
1:54
This is great if the visitor is
a macOS user as Havetica Neue is
1:59
a built in macOS font.
2:03
However, Windows users may not
have this font installed and
2:06
will have trouble viewing your website.
2:10
We can then assign a Windows friendly
font, Arial, to be used instead.
2:13
Finally, we'll want to specify
a generic sans-serif font for
2:18
any systems that don't
have either typeface.
2:22
A safe font stack to use
here is font-family,
2:25
Helvetica Neue, Arial, sans-serif.
2:29
Now I'm sure you're thinking,
what if you wanted your website to have
2:33
the correct font no matter
what computer was viewing it?
2:37
Well, the world of typography is vast and
2:41
you don't have to limit yourself
to the standard system fonts.
2:43
There are web font libraries out there
that you can use in your website.
2:47
Google Fonts is one of these libraries.
2:52
Let's check it out.
2:54
Head over to fonts.google.com, or follow
the link in the teacher's notes below.
2:56
And here you'll see a huge library of
fonts that are free to use from Google.
3:02
We'll be using Playpen Sans, which we can
search for up here in the search bar.
3:08
There should only be one result,
so click through to that page.
3:14
This page will showcase the name
of the font, an example, and
3:19
then if we scroll down,
we'll see lots of different weights.
3:23
These match up to the font weight
property that we learned about earlier.
3:27
This section allows us to select
the weights that we foresee using in our
3:32
project.
3:36
For us, we'll only need the regular
weight and bold weight,
3:37
so let's select regular 400 and
extra bold 800.
3:42
You'll see a selected family panel
pop up on the right containing all
3:46
the type faces and weights we want to use.
3:51
Scrolling down, we can see the use on
the web section, which is what we want.
3:54
There are two ways to link
this to our project and
4:00
we'll use the Add import method,
so click on that radio button.
4:03
We'll select Add Import up to
the semicolon and copy it.
4:08
Now navigate to the very
top of our CSS file and
4:13
paste this in before
the universal selector.
4:17
This links the font to our CSS file so
that we can use it.
4:21
Now we'll need to specify where
to use that font in our CSS.
4:26
Back in the Google Fonts page,
under the Add Import Text box,
4:30
we can see the font stack suggested for
us.
4:34
Let's copy this and head back to our CSS.
4:38
We want all the text on our page to
have this font family applied, so
4:41
we can pop this declaration in body.
4:45
Let's save our file and refresh the page.
4:49
And we can see that the play pen sans
typeface is being used for all our texts.
4:53
It's really starting to
look like the mockup.
4:59
In addition to font properties, there are
also properties that handle text styling.
5:02
We'll introduce two very common properties
that we'll use in this project.
5:07
Text-align is just like the text alignment
feature in your favorite word processor.
5:12
This aligns text to the left,
center, or right of its container.
5:17
For example, text-align:center will
align the selected HTML text element or
5:22
elements to the center.
5:27
Line-height is another word processor
feature that you may be familiar with.
5:29
This controls the space
between lines of text.
5:34
For example, line-height:2 would
spread the content out vertically.
5:38
These properties are vital for
fine tuning the appearance and
5:43
readability of your tax.
5:46
Let's use text-align to
center align the header, nav,
5:49
and footer content using
a new CSS role block.
5:53
I'll type header, nav, footer,
5:57
then in the declaration type
text-align and set it to center.
6:00
We'll also use text align to center
aligned spaghetti carbonara,
6:06
which is a heading 2, so
we'll select the h2 tag, and
6:11
in the declaration block,
we'll set the text align to center.
6:15
We'll also want to make this font
size a little larger to match mockup,
6:20
like 36 pixels.
6:25
We'll also increase the line spacing
between the P and LI elements so
6:27
it matches the mockup better.
6:32
Below our h2 selector,
we'll select the paragraph and list item.
6:35
Then we'll give it a line height of 2 so
there's double spacing.
6:40
Finally, we'll make all the meat related
lines thicker by giving them a font
6:45
weight of 800, which is one of
the styles we selected in Google Fonts.
6:50
Find the .meet CSS roadblock
we've already been working in.
6:56
Oops, looks like I forgot the semicolon
after the hex color, I'll add that in.
7:00
Now underneath this property I'll add the
font weight property setting it to 800.
7:06
Save the file and refresh the page.
7:12
Nice, we're getting closer and
closer to the mockup.
7:16
Mastering font related CSS properties
font stacks and Google Fonts empowers you
7:20
to create captivating typography, adding
depth and personality to your web designs.
7:25