Noissue - Update font-family to Source Sans Pro on abp.org

static/css/main.css

Index: static/css/main.css
===================================================================
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -1,18 +1,34 @@
-*
+@font-face

[saroyanm, 2018/02/14 16:49:29]

Question: How much effort it would be to include Fonts implementation in the
Websites default ?
Is there a such plan ?

(I assume we use same fonts across all websites)

[ire, 2018/02/15 17:21:47]

I think we would ideally want to have this font in website-defaults and share it
across websites, but it loading a file directly from website-defaults would
require that we add a build step (since the website-defaults repository would be
managed via npm). 

We don't currently have website-defaults in this project (currently Julian has
been manually adding the CSS to defaults.css), so I don't think doing this would
work until we decide to add it. 

[juliandoucette, 2018/02/19 11:32:48]

Acknowledged.

 {
-  font-family: Arial, sans;
-  font-size: 16px;
+  font-family: "Source Sans Pro";

[saroyanm, 2018/02/14 16:49:30]

Suggestion/Note: Doesn't necessarily need to be included in the current
review/release.

I assume current fonts doesn't cover all supported languages ?
For example I assume they do not contain ex. cyrillic, greek characters, but
rather only Latin.

With: https://codereview.adblockplus.org/29654555/ we are trying to fix that for
the UI, but I think it's also relevant to the websites.

[ire, 2018/02/15 17:21:46]

From my tests (viewing the homepage in all the different languages) there didn't
seem to be any issue with any of the languages. But from looking though the
review you mentioned, it seems like you did come across issues in certain
languages. If that is the case, we could follow your methodology here of loading
different fonts for the different subsets.

I would prefer to start with just this and have a tester see if there is an
issue to begin with though, just to make sure it's actually necessary in our
case. What do you think?

[juliandoucette, 2018/02/19 11:32:48]

I think that we can start with Latin only in main.css and include variants
as-needed via template (separately, assuming that including this latin font will
not have a negative impact on existing translations). We should ask Tamara
though. Will you do that Ire?

+  font-weight: 400;
+  font-style: normal;
+  src: local("Source Sans Pro"),
+       local("Source-Sans-Pro-400"),
+       url("../fonts/Source-Sans-Pro-400/Source-Sans-Pro-400.woff2") format("woff2"),
+       url("../fonts/Source-Sans-Pro-400/Source-Sans-Pro-400.woff") format("woff");
+}
+
+@font-face
+{
+  font-family: "Source Sans Pro";
+  font-weight: 600;
+  font-style: normal;
+  src: local("Source Sans Pro Semibold"),
+       local("Source-Sans-Pro-600"),
+       url("../fonts/Source-Sans-Pro-600/Source-Sans-Pro-600.woff2") format("woff2"),
+       url("../fonts/Source-Sans-Pro-600/Source-Sans-Pro-600.woff") format("woff");
 }
 
 body
 {
+  font-family: "Source Sans Pro", Arial, sans-serif;
   margin: 0;
-  line-height: 1.5;
 }
 
 #content
 {
   padding-bottom: 2em;
 }
 
 a img