My code's not working!

×

  1. Double check all your files are saved.
  2. Check each quote has a pair.
  3. Do all of your HTML tags have a closing tag?
  4. Ask a mentor for help!

Add a Font

Adding a custom font is an easy way to add personality to your web page.

For Larry’s profile page we chose bungee:

This is a font called bungee

and open sans:

This is open sans

We found both of these fonts on Google Fonts. They have a bunch of amazing fonts to choose from, and they make it SUPER easy to add them to your webpage. If you like the one’s we’ve chosen, stick with them, or go browse around and pick your favourite from Google Fonts.

Once you’ve chosen some awesome fonts to include, we’re going to include them in the <head> of your HTML document.

Alright, let’s open up our profile.html page.

In our <head> tag, we’re going to add another <link> tag. Remember that we put anything the browser needs to know to render our page properly in the <head> tag.

  <head>
    <link href="https://fonts.googleapis.com/css?family=Bungee|Open+Sans:400,400i,700" rel="stylesheet">
    <link rel="stylesheet" href="assets/basic-layout.css">
    <link rel="stylesheet" href="styles.css">
    <title>Profile Page</title>
  </head>

Now that we’ve included our font in our header, we’re ready to use them on our page. We’re going to use Bungee for titles on our page.

So, let’s open up styles.css and make our h1 and h2 elements use the Bungee font-family:

  h1, h2 {
    font-family: 'Bungee', serif;
  }

Let’s also tell the rest of our page to use Open Sans.

  body {
    font-family: 'Open Sans', sans-serif;
  }

Once we save and refresh both styles.css and profile.html, we should see something like this:

header_step_nine

Note: Your page might look a little different if you chose to use different fonts.

Let’s use the font-size CSS property to really customize the look of our header. We want to select only the text in our header, and CSS has a way for us to do just that. In styles.css add the following:

  header h1 {
    margin: 0;
    font-size: 50px;
  }

These CSS styles will only be applied to <h1> elements inside the header. Let’s add some styles to our <p> tag as well.

  header p {
    margin: 0;
    font-size: 16px;
  }

Save styles.css and refresh your page. You should see something like this:

header_step_ten