Font-family not showing correctly on my website

Question

I am not sure what happened to my css font-family that I was using on my website. Until yesterday it was working on. Then this morning it stopped working on Chrome and then later on FireFox & Safari (Mac).

Weird thing is that it looks fine on one of my teammates computer (Linux) but also looks bad on a friend's Mac computer. No idea what happened. When I inspect the element I can see the CSS font-family attribute but it is crossed out, as if the font did not load.

This is how I have my fonts added on my CSS:

@import url(http://fonts.googleapis.com/css?family=Rokkitt:400,700|Open+Sans:600italic,400,600,700|Helvetica+Neue:400,500,700);

This is how it looks now and how it should look.

Completely stuck, no idea what happened.

Answer 1

Remove the part |Helvetica+Neue:400,500,700.

Google Web Fonts do not contain Helvetica Neue. It is a commercial font, not available for free, and probably not available as a web font for a fee either.

When you have a font that does not exist at Google Web Fonts in your requests, the Google server responds with 403 Forbidden and does not send any font. You can see this if you use the developer tools (F12) and look at the Network section when loading your page.

When you split your request to three requests, one for each font family, the other requests are successful. But it is more efficient to do have the two font families in one request and drop Helvetica Neue (or replace it with some font that Google actually has).

Answer 2

Ok, got it to work. Not sure what happened. All I did is change the line:

@import url(http://fonts.googleapis.com/css?family=Rokkitt:400,700|Open+Sans:600italic,400,600,700|Helvetica+Neue:400,500,700);

to:

@import url(http://fonts.googleapis.com/css?family=Rokkitt:400,700);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:600italic,400,600,700);
@import url(http://fonts.googleapis.com/css?family=Helvetica+Neue:400,500,700);

Answer 3

Helvetica Neue is in fact available at Google Fonts:

http://fonts.googleapis.com/css?family=Helvetica+Neue