Font family Open Sans not working

10
votes

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.

3
htmlcssfontsgoogle-font-api
you'll have to show us your CSS as well – DA.
You probably have a conflicting style with a higher specificity. See this calculator 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
also, check that your URL works. I forget but there's certain situations where the // won't work (might be certain browsers) – DA.
injecting <link href="..." type='text/css' /> alone isn't enough to use font on site. You also should add <style>body { font-family: 'Open Sans', sans-serif !important; }</style> right after the link tag, as @War10ck suggested. – ankhzet

3 Answers

15
votes

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

3
votes

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?

2
votes

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