htmlcssfontsgoogle-font-api

Why can't I get Google Fonts to work?


So I've tried linking in the head of the html page and using the @import in my css file, but the font I'm trying to use still will not load. I also checked to make sure I'm not running any plugin that could be causing the problem, so I'm really not sure what to do. If anyone could help me solve this that would be wonderful.

<!Doctype html>
<html>
<head>
<link type="text/css" rel="stylsheet" href="anagram.css">
</head>
<body>
  <p>Look here!</p>
</body>
</html>

@import url(http://fonts.googleapis.com/css?family=Tangerine);

p {
font-family:'Tangerine';
font-size:48px;
}

Solution

  • The CSS is correct, but you can't just tack raw CSS onto the HTML like that. Move it into a <style> tag, inside the <head> or <body>.

        <!DOCTYPE html>
        <html>
          <head>
            <style>
              @import url(http://fonts.googleapis.com/css?family=Tangerine);
    
              p {
                font-family:'Tangerine';
                font-size:48px;
              }
            </style>
          </head>
          <body>
            <p>Look here!</p>
          </body>
        </html>