CODEWITHSUNDEEP
csshtmlfont-facegoogle-font-apiembedded-fonts
Mr Toad
Mr Toad

Reputation: 256

Google font just will not work

I have followed the instructions on the google fonts website over an over and my webpage displays as it should on MY laptop, however, the fonts 'FJALLA ONE' does not load on any other computer or device.

Am I doing something wrong? Can I store the fonts in a folder and link them like a css file?

Here is my html - part 1:

head>

<link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>

part 2:

<div class="box">
        <h1 class="animated bounceInDown">SHEREE WALKER </h1> </div>

My CSS

.box h1 {
    font-family:'FjallaOne', sans-serif;    !important;
    font-size:45px;
    text-align:center;
    color:#FFF;
    padding-top: 10%; }

Am I missing something? Any help would be amazing. I'm at my wits end.

Upvotes: 2

Views: 1710

Answers (2)

ZZZZtop
ZZZZtop

Reputation: 457

Your problem probably exists in this piece of code:

font-family:'FjallaOne', sans-serif;    !important;

it should be 

font-family:'Fjalla One', sans-serif !important;

OR

font-family:'Fjalla One', sans-serif;

If that still does not fix it try removing , sans-serif

Upvotes: 2

Michelangelo
Michelangelo

Reputation: 5948

Your problem is not with your code. It is fine. I would remove the !important though, it's not necessary and the syntax is also not correct, but the code will still work even with wrong syntax.

What your real problem is: the text is white so you will never see it on a white background. You can see it here working with red text-> http://jsfiddle.net/sxntrvrj/1/

h1 {
    font-family: 'Fjalla One', sans-serif; 
    font-size:45px;
    text-align:center;
    color:red;
    padding-top: 10%;
}

Upvotes: 2

Related Questions