Google Font Not Working With CSS?

Question

I was working on an html page, got halfway through, and decided to start styling somethings. . . All of my styling worked fine! That is until I tried to get a Google Font. I followed all of the instructions and inserted everything into css correctly. However, when I view the page on Chrome, it only displays the "fallback" generic sans-serif font. Here is my css:

#page-first-open {
 border: 1px solid black;
 width: 1000px;
 height: 500px;
 text-align: center;
 margin: auto;
 position: relative;
 top: 50px;
 
}

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

#page-first-open p {
 font-size: ;
 font-family: 'Raleway', sans-serif;
 
}

<!DOCTYPE html>
 <html>
  <head>
   <link rel="stylesheet" type="text/css" href="test.css">
   <script>
   </script>
   <title>User Test</title>
  </head>
  <body>
   <div id="wrapper">
    <div id="page-first-open">
     <p>Hello, and welcome to this page. . .<br>
     If you don't mind me asking, <br>
     What is your name (or what you'd like to be called)?</p>
    </div>
   </div>
  </body>
 </html>

Could someone please tell me what I am doing wrong (If I a doing it wrong), or point me in the right direction of getting it to work?

See this question: http://stackoverflow.com/questions/14676613/how-to-import-google-web-font-in-css-file. Include the @import at the top of the file. — Arnav Borborah, Aug 02 '16 at 14:31
The [@import](https://developer.mozilla.org/en/docs/Web/CSS/@import) CSS rules must precede all other types of rules, except @charset rules — ocordova, Aug 02 '16 at 14:35
@MadalinaTaina - A lot of people don't look for duplicates before answering. Unfortunately, this means the OP is stuck with this question (which has already started getting down votes). — BSMP, Aug 02 '16 at 14:37
@BSMP I know, but if we tolerate this every time, the quality of the questions will be very low and the good questions will be ignored because it will be harder and harder to keep the topics in order. — Madalina Taina, Aug 02 '16 at 14:41
@MadalinaTaina, I'm so sorry, I was in a rush to get this figured out, because I have to leave in a few minutes, and won't be able to work on my project for a while after I leave. . . I tried searching for someone else with the same question, but was only able to find a similar (but different) question. I knew how awesome the Stack Overflow community was in helping me find a solution quickly, so I thought I'd ask. Now I feel so bad for wasting everyone's time. :( — Brett Carwile, Aug 02 '16 at 14:56
@BrettCarwile It is ok, what I found so surprising was everyone wanted to post the same answer and nobody respected it already existed other answers and other similar questions. In the last few days I noticed more and more a fight for points, but probably it is just my opinion. — Madalina Taina, Aug 02 '16 at 15:03

score 15 · Accepted Answer · answered Aug 02 '16 at 14:34

15

Try to put your import on the top of your file, before any declaration.

answered Aug 02 '16 at 14:34

score 3 · Answer 2 · answered Aug 02 '16 at 14:33

Include the @import directive at the top of the file.

@import url(https://fonts.googleapis.com/css?family=Raleway);
#page-first-open {
 border: 1px solid black;
 width: 1000px;
 height: 500px;
 text-align: center;
 margin: auto;
 position: relative;
 top: 50px;
 
}



#page-first-open p {
 font-size: ;
 font-family: 'Raleway', sans-serif;
 
}

<!DOCTYPE html>
 <html>
  <head>
   <link rel="stylesheet" type="text/css" href="test.css">
   <script>
   </script>
   <title>User Test</title>
  </head>
  <body>
   <div id="wrapper">
    <div id="page-first-open">
     <p>Hello, and welcome to this page. . .<br>
     If you don't mind me asking, <br>
     What is your name (or what you'd like to be called)?</p>
    </div>
   </div>
  </body>
 </html>

score 1 · Answer 3 · answered Aug 02 '16 at 14:34

You can remove:

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

And add:

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

To your <head>. Like so:

<!DOCTYPE html>
    <html>
        <head>
            <link rel="stylesheet" type="text/css" href="test.css">
            <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
            <script>
            </script>
            <title>User Test</title>
        </head>
        <body>
            <div id="wrapper">
                <div id="page-first-open">
                    <p>Hello, and welcome to this page. . .<br>
                    If you don't mind me asking, <br>
                    What is your name (or what you'd like to be called)?</p>
                </div>
            </div>
        </body>
    </html>

score -2 · Answer 4 · edited Aug 02 '16 at 18:37

-2

Try to add the following in the head section of your html code and see if it fixed the problem: <meta charset="UTF-8"> In addition, you need to move the @import to the top of the CSS file, so the font will load

edited Aug 02 '16 at 18:37

Arnav Borborah

11,357
8
43
88

answered Aug 02 '16 at 14:33

sietse85

1,488
1
10
26

How does this answer the question? the `@import` would still not work even if the encoding was changed – Arnav Borborah Aug 02 '16 at 18:20
If font don't support charset – sietse85 Aug 02 '16 at 18:23
Still though, you didn't state the fact that the **import needs to be at the top of the file**. I understand that even if charset is supported, it won't work. – Arnav Borborah Aug 02 '16 at 18:25

Google Font Not Working With CSS?

4 Answers4