Why can't I get Google Fonts to work?

Question

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;
}

try to put quote like `@import url('http://fonts.googleapis.com/css?family=Tangerine');` — Shehary, Aug 04 '15 at 19:06
yeah agree with @WaleedKhan, on second look i see you have typo mistake here , should be `rel="stylesheet"` and — Shehary, Aug 04 '15 at 19:11
@WaleedKhan, this is not enough `Perhaps you meant rel="stylesheet"?` even you not pointing where he made mistake — Shehary, Aug 04 '15 at 19:12

score 2 · Answer 1 · edited Aug 04 '15 at 21:08

You can't place CSS randomly in your HTML file like that. It needs to be in a <style> tag, or an external stylesheet. Move your styling into a <style> tag, which needs to be inside the <head> as well.

<html>
<head>
    <title>My website... whatever</title>
    <style>
        @import url(http://fonts.googleapis.com/css?family=Tangerine);

        p { font-family: 'Tangerine'; }
    </style>
</head>
<body>
    <p>My font is called Tangerine</p>
</body>
</html>

...or, what I find easier when using Google Fonts is to link the font's stylesheet, and then just reference it in my stylesheet. When using Google Fonts, this is the default option.

<html>
<head>
    <title>My website... whatever</title>
    <link href='http://fonts.googleapis.com/css?family=Tangerine:400,700' rel='stylesheet' type='text/css'>
    <style>
        p {
            font-family: 'Tangerine';
            font-size: 100%;
            font-weight: 400;
        }
        h1 {
            font-family: 'Tangerine';
            font-weight: 700;
            font-size: 150%;
        }
    </style>
</head>
<body>
    <h1>I'm thick and large.</h1>
    <p>I'm small and thin.</p>
</body>
</html>

If you use this method, make sure to include it before your CSS, like above. Both still need to be inside the <head> section.

The above also shows you how Google can import multiple weights of a font, and how to use them in your stylesheet. In this example, paragraphd use the thinner version of the font, while the <h1> headings use a thicker version of the font, also at a larger size.

You can't just choose whatever weight you want though. Tangerine for example only has 400 and 700, so I've imported both of them. Only import those you are going to use though, as importing too many will slow down the website unnecessarily.

Hope this helps.

Would like to add that what I said about the CSS needing to be in the is not strictly true. But for most use cases there's really no reason not to. — gordonzed, May 04 '22 at 18:03

score -2 · Accepted Answer · answered Aug 04 '15 at 19:16

This works. Your HTML is just badly formed.

<!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>

Why can't I get Google Fonts to work?

2 Answers2