Google font just will not work

Question

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.

Sorry, I am confused. Are you saying it works on some computers? How about the other font you are using? Is it displaying on all the computers? — Michelangelo, Jul 10 '15 at 00:33
Use google fonts in React.js? solution provided already here >>https://stackoverflow.com/a/47733243/8625811 — Rizwan, Jul 02 '19 at 09:35

ZZZZtop · Accepted Answer · 2016-02-03T21:59:56.830

2

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

edited Feb 03 '16 at 21:59

answered Jul 10 '15 at 00:14

ZZZZtop

457
1
5
19

Unfortunately it still does not work. I really don't know what is going on. – Mr Toad Jul 10 '15 at 00:29
@ShereeWalker Please review the link Mikey has posted to the jsfiddle and make sure yours looks similar to his example. It could be the color that makes it seem like it is not working. If that still does not work, can you provide a link to where this webpage is located? – ZZZZtop Jul 10 '15 at 00:35
Actually I just checked the google link and in your font family you need a space so it would look like this: `font-family: 'Fjalla One';` – ZZZZtop Jul 10 '15 at 00:36
@Zachary1748 Nice catch, I was in auto mode so I looked up the font myself and copy pasted it from there :)...and yes it does not work when you make it one word. Although OP mentions that it works on a different laptop. I am confused :/ – Michelangelo Jul 10 '15 at 00:39
@Mikey - I uninstalled the font from my laptop and sure enough it stopped displaying correctly, which explains that. It's all working good now though. Thanks a lot. – Mr Toad Jul 10 '15 at 01:07
@ShereeWalker No problem. Good luck and don't stress :) – Michelangelo Jul 10 '15 at 01:08

score 2 · Answer 2 · answered Jul 10 '15 at 00:24

2

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

answered Jul 10 '15 at 00:24

Michelangelo

5,888
5
31
50

Even before the 'important' it did not work. I've just uploaded my site (unfinished) to look at - when I view it on any other computer the main header falls apart. It only works on my laptop where I have the fonts installed. – Mr Toad Jul 10 '15 at 00:41
You know that you don't have to install anything, google fonts loads from a remote server. It works fine on my pc. I will post a screen image, although sheree walker is overlapping each other. – Michelangelo Jul 10 '15 at 00:45
@ShereeWalker try clearing your browser cache by pressing Ctlr + Shift + R OR Ctrl + F5 – ZZZZtop Jul 10 '15 at 00:48
The words overlap because that is not FJALLA ONE displaying. Took me ages to realise – Mr Toad Jul 10 '15 at 00:49
I swapped colours back and forth when checking on other computers. New colour = new file, not cached. – Mr Toad Jul 10 '15 at 00:51
@ShereeWalker Your problem is mentioned in the other answer and I have given you a correct sample to work with! You need to have space between Fjalla and One. – Michelangelo Jul 10 '15 at 00:53
@ShereeWalker I have noticed in your stylesheet there is a missing comma and a space therefore it is not reading correctly make sure it looks like this: `font-family: "Fjalla One", sans-serif;`. Then remove the box fixed width and this will fix the overlapping issue. – ZZZZtop Jul 10 '15 at 00:54
@Zachary1748 This is funny though. It is really only the space just tested it on OP's website. Changed the css in the console and it did not overlap anymore. LOL – Michelangelo Jul 10 '15 at 00:55
@Mikey is right lol, the overlapping is caused from the missing space in the font – ZZZZtop Jul 10 '15 at 00:59
Hoorah! Now it works! I have no idea why I had a space in there. I am a tad embarrassed though - I have been working on that issue for a good couple of days – Mr Toad Jul 10 '15 at 01:00

Google font just will not work

2 Answers2