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.
<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
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:
Let’s also tell the rest of our page to use Open Sans.
Once we save and refresh both styles.css and profile.html, we should see something like this:
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:
These CSS styles will only be applied to
<h1> elements inside the header. Let’s add
some styles to our
<p> tag as well.
Save styles.css and refresh your page. You should see something like this: