Why my CSS looks different than your CSS?

Question

I wanted to have a page of mine the same textual style as this beautiful text, Dan Wahiln's AngularJS tutorial

So in Chrome Dev Tools: I can see the following:

font-size: 12pt;
line-height: 1.8em;
font-family: "Open Sans",Calibri,Candara,Arial,sans-serif;

Please see the image below:

Now to my CSS:

p.test-fonts {
    font-family: "Open Sans",Calibri,Candara,Arial,sans-serif;
    font-size: 12pt;
    line-height: 1.8em;

    margin: 0 0 10.5px
}

However, the text rendered differently::

Why this difference?

Answer 1

if you look in his source, you'll see he is including the stylesheet:

http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700

which includes:

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    src: local("Open Sans"), local("OpenSans"), url("http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff") format("woff");
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 700;
    src: local("Open Sans Bold"), local("OpenSans-Bold"), url("http://fonts.gstatic.com/s/opensans/v10/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff") format("woff");
}
@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 400;
    src: local("Open Sans Italic"), local("OpenSans-Italic"), url("http://fonts.gstatic.com/s/opensans/v10/xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.woff") format("woff");
}
@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 700;
    src: local("Open Sans Bold Italic"), local("OpenSans-BoldItalic"), url("http://fonts.gstatic.com/s/opensans/v10/PRmiXeptR36kaC0GEAetxjqR_3kx9_hJXbbyU8S6IN0.woff") format("woff");
}

Answer 2

Do you have the Open Sans font in your project? Open-sans is not a browser default font, you need to include it manually, it's a font provided by Google Fonts and therefore you need to call it in your document whereas is from the CSS through @import or inside the DOM in the .html file.

If you go to the GoogleFonts site http://www.google.com/fonts and look for "Open-sans" you'll find all the options there on how to use it, you'll have to choose the weights you want to use and the different styles you want to import as each one of those differences are an actual independent font and so they will weight more as you increase the number of variations available for your site.

ALSO You are viewing your document loading it from the "file" declaration on your browser, I would recommend you to use a local-machine such as Xampp if you are using Windows in order to not have URL issues when using relative paths on your CSS.