Address #171

[Robinlovelace]

No description provided.

[yihui]

@import is only necessary when you are using a font that is not a system font. If you have installed the font, there is not need to @import it from an external source. Note that if you only downloaded the font but didn't install it, you still need to @import the downloaded font files. I don't know how to express these rules clearly here. It is probably too much for this section and deserves another section (or appendix)...

You are absolutely correct in #171 that there is still a lot of room for improving the documentation. CSS is definitely not a small topic :)

Thank you!

[Robinlovelace]

Thanks for the comment @yihui. Shall I modify the PR accordingly?

CSS is definitely not a small topic :)

Seems so. I searched in vain for good links to include that may help people learn about the topic but found little that was unambiguously useful, other than that w3schools link which I'm not convinced is the best resource. Do you know of any good open CSS tutorials we can link to ?

[yihui]

I often look up things on w3schools, too. I think its HTML/CSS tutorials are fine.

We can leave PR open for now. Someday we might work on a whole book on pagedown (one of the motivations is exactly that CSS is a huge topic), and we can revisit it at that time. Thank you!

[RLesur]

Dealing with fonts is definitely difficult, moreover with pagedown.
I also use Google Fonts but I've faced many problems.

They are revealed through the stylesheet available at https://fonts.googleapis.com/css?family=Comic+Neue:

@font-face {
  font-family: 'Comic Neue';
  font-style: normal;
  font-weight: 400;
  src: local('Comic Neue Regular'), local('ComicNeue-Regular'), url(https://fonts.gstatic.com/s/comicneue/v1/4UaHrEJDsxBrF37olUeD96rp5w.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Here are the two main problems I faced.

First problem: font version

As one can see in the src declaration, local (ie. system available) fonts are preferred.
If the font is installed but its version is different than the Google Fonts one, you get a different result. This is not fine when you need to get the same result on different computers. You don't know whether the font is installed and if its version is the same version as the Google Fonts one.

Second problem: font weights and font styles

By default, only one font file is downloaded (the normal style & normal weight). The browser simulates bold and italics from this file.
You can pass some options to Google Fonts to download more files (bold, italics and bold/italics for instance). In many cases, the result will be different than the transformation of the normal font file (because fonts designers do not blindly transform the normal font as the browser do).

IMO, the safest way to deal with fonts is to download the font files, add them to the project and add CSS font face stylesheets. In order to do that, I recently used the gfonts package developed by @pvictor and was quite happy.