Practice Using Google Fonts

Activity

Objective: Use a Google font.

Setup:

Copy all the files from the start-01 folder to practice folder and replace if necessary.

The activity's completed file can be found in the completed folder.

Steps:

Open your web browser and navigate to Google Fonts.

Google Fonts changes its web site design from time to time. Your view may be different.

Google Fonts provides a catalog of available fonts and a dialog panel that allows you to search or filter fonts.
In the search filter panel Categories pane uncheck all but Sans Serif.

A number of sans serif fonts will apppear. A popular san serif font is called Roboto. If it does not appear. You can type the name in the Search box to further filter the listing.
Hover over the Roboto name area and a series of selection drop downs are presented. Select the one showing the font styles.

You will see that Regular 400 is pre-selected. Then close the styles drop down.
Select the plus icon in top right corner opposite the Roboto font name. This adds it to a cart panel.

The plus changes to a minus and a cart panel appears at the bottom of the page.
Next select the plus icon in top right corner opposite the Roboto font name.

This contains all fonts you may have selected.
Keep the web browser tab for Google fonts open. Open the roboto.html file in a second tab in your web browser.
Open the roboto.css file in your code editor. It has the following contents:
```
@charset "UTF-8";

body{
	font-family:Arial, Helvetica, sans-serif;
}
```
Does the body selector use web safe fonts or web fonts?

These are common web safe fonts.

What font family was selected for the body selector and how could you find out?

It was one of the three font-family values: Arial, Helvetica and sans-serif.

The web browser tools can be used to discover the font family selected. Here is the result on a Macintosh using Chrome.
In the roboto.css file replace the following …
```
Arial, Helvetica, sans-serif;
```
… with the following …
```
'Roboto', sans-serif;
```
… resulting in …
```
body{
	font-family:'Roboto', sans-serif;
}
```
… and save.
Reload the roboto.html file in your web browser.

What changed? Explain your answer.

The operating system provided a sans-serif font unless by chance the Roboto font was installed in the operating system by the owner, you.

Here Helvtica is shown using Chrome tools on a Macintosh.

Why was the Roboto font not selected?

It is not available on the system. It needs to be downloaded.

In the roboto.html file insert before …

	<link rel="stylesheet" type="text/css" href="roboto.css">

… the following …

	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

… and save.

Reload the roboto.html file in your web browser.

Why are the h1 and h3 elements no longer boldfaced?

We are applying the Roboto font using the 400 medium style to all the elements. That represents a regular font weight. It is the same as applying font-weight:normal to the body selector for fonts that support a boldface style.
In the roboto.css file insert at end of the file …
```
h1, h3{
	font-weight:bold;
}
```
… and save.
Reload the roboto.html file in your web browser.

Explain why bold was not applied to h1 and h3?

No change in font styling.

Explain why bold was not applied to h1 and h3?

The answer is that the Roboto font using the 400 medium style does not support font weight for bold.

What numeric value for the font-weight represents bold and would using it for the h1 and h3 selectors change them to bold?

The numeric value of 700 is the equivalent of the value bold. However using that would not change the fact that the Roboto font using the 400 medium style does not support bold.
Return to the Google Fonts tab you kept open in your web browser and close the font selection panel.
Add the Roboto Bold 700 style to the font selection and open the font selection panel.
What changes do you notice from the previous selection of the Roboto Medium 400?
The link element has changed. The link element as it appeared with Roboto Medium 400 …
```
	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
```
The link element as it appeared with Roboto Medium 400 and Roboto Bold 700 …
```
	<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
```

In the roboto.html file replace …

	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

… with the following …

	<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">

… and save.

Reload the roboto.html file in your web browser.
Verify using web browser tools that the Roboto Bold 700 style was applied to the h1 and h3 elements.

You can use your web browser inspection tools. For the h1 element …

For the h3 element …
DIY: Add the Roboto Black 900 font style and apply to the h1 element and keep the Roboto Bold 700 applied to the h3 element.
Page in web browser …

… and inspecting the h1 element …

The change to the roboto.html file …
```
	<link href="https://fonts.googleapis.com/css?family=Roboto:400,700,900" rel="stylesheet">
```
Change shown in bold.

The change to the roboto.css file …
```
h1{
	font-weight:900;
}
h3{
	font-weight:700;
}
```
Did you need to have Google fonts generate the link element?

No. The element only needed to be changed by adding the 900 to the href attribute URL. Applying to the h3 element used a standard numeric value for the font-weight property.
DIY: Provide fallback web safe fonts for the Roboto font.
```
body{
	font-family:'Roboto', Arial, Helvetica, sans-serif;
}
```
Change shown in bold.

Complete and Continue