Project Solution: Integrating Custom Fonts
This solution guide walks through how to find and implement a custom font into an application using HTML calls and CSS font family attributes.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license
APPLY NOWLEARN MORE

In this video, we'll talk about bringing in a custom font and integrating it with our project.

I went through quite a few fonts, and the one I really like is called "Raleway". There are many places where you can get it, but I'll pick it from Google fonts. Feel free to choose a font that you like, or use the same one - it's up to you.

In Google Fonts, look for a link called "Select this font", and this will open a window with the HTML code in it. Copy and paste it just above your <link> tag for stylesheet. This location is important because of the cascading nature of style sheets. 

<head>
  <title>Tesla Clone</title>
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <link href="styles.css" rel="stylesheet">
</head>

In the html style, let's update the font-family to "Raleway", but we'll still keep sans-serif as the background font. 

html {
  background: url('img/teslas.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: 'Raleway',sans-serif;
}

If you refresh the browser, you can see the updated font. It sure looks a lot better.

Next, we'll work on aligning the center buttons and the footer links.