11

I'm using Open Sans font for my website but it is not working across all computer and I can't figure it why.

I'm calling it in my <head> tag. I tried https or http or // and the result is the same.

<link href='//fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,400,600,700' rel='stylesheet' type='text/css'>

It is well loaded from the browser (status 200).

My CSS looks like this:

body{
  font-family: OpenSans;
}

But my text are rendered with some sans-serif font besides the fact that it mention Open Sans in the CSS inspector. Even if I remove all font-family from the CSS inspector in my Chrome browser, the font doesn't change. Also, if I add !important, nothing change.

What can be the source of this issue?

I already tried this solution without success.

I don't think it's a conflict because it's working on some computer.

Community
  • 1
  • 1
ZazOufUmI
  • 3,212
  • 6
  • 37
  • 67
  • 1
    you'll have to show us your CSS as well – DA. Sep 10 '15 at 17:58
  • You probably have a conflicting style with a higher specificity. See [this calculator](http://specificity.keegan.st/) for more information on how to calculate selector specificity. Add `body { font-family: 'Open Sans', sans-serif !important; }` to your stylesheet. If the `!important;` added to the end works, it supports this theory that a style is overriding your original `Open Sans` font-family declaration. Look through your browser developer tools, find the style and remove it. Make sure to remove `!important;` as well. It will help to debug but ***should not*** continue to be used.. – War10ck Sep 10 '15 at 17:59
  • also, check that your URL works. I forget but there's certain situations where the `//` won't work (might be certain browsers) – DA. Sep 10 '15 at 18:01
  • injecting `` alone isn't enough to use font on site. You also should add `` right after the link tag, as @War10ck suggested. – ankhzet Sep 10 '15 at 18:05

3 Answers3

15

Ok, my main error was to use font-family: OpenSans; instead of font-family: 'Open Sans';

ZazOufUmI
  • 3,212
  • 6
  • 37
  • 67
5

did you try to reference your CSS with https?

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,400,600,700" rel="stylesheet" type="text/css">

I tried this with JSFiddle and it work in my Chrome. https://jsfiddle.net/doqvqfhe/1/

Could you give some more code?

Philip Szalla
  • 91
  • 7
3

I use font-family "Open Sans", It works instead of "OpenSans".

Chinh Vo Wili
  • 85
  • 3