Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Mikhail Stepanov
seal-mask
.a{fill-rule:evenodd;}techdegree
Mikhail Stepanov
Full Stack JavaScript Techdegree Student 8,330 Points
Posted by Mikhail Stepanov
.a{fill-rule:evenodd;}techdegree
Mikhail Stepanov
Full Stack JavaScript Techdegree Student 8,330 Points

Google Fonts for Project 2

my repo: https://github.com/mikestepanov/Project2

Project 2 asks to use Google Fonts: "Use a font from Google Fonts for the text." and links to https://fonts.google.com/

I picked "Times New Roman" (https://fonts.google.com/?query=times+new+roman) and used it in my css file:

".... font-family: "Times New Roman", Georgia, serif; ...."

However, I got reviewer's comment saying that no google font is visible.

So what else exactly do I need to do? I chose a font from a link I received from instructions and I am kind of confused why this didn't work out.

1 Answer

Martin Zarate
Martin Zarate
10,723 Points

A few things: on your project you are currently NOT including a Google font. The link for the "Times New Roman" fonts is not from Google, it is from a 3rd party, also "Times New Roman" is a web font built in most web browsers, so there is no need to import it. For this exercise, you need to select a font that is hosted by Google, example: "Roboto". Then you include the link to the Google CSS to pull the font into your project, then you declare the font in your CSS. In the head of your index.html include the link like this:

  <head>
    <meta charset="utf-8">
    <title>Portfolio</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

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

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

Then in your styles.css declare the font to be used:

* { font-family: 'Roboto', sans-serif; }

Hope this helps, cheers.