add rubik font

homepage/theme/static/css/fonts.css

@@ -1,31 +1,23 @@
+/* rubik-regular - latin */
 @font-face {
-	font-family: 'Noto Sans';
+  font-family: 'Rubik';
-	font-weight: 400;
+  font-style: normal;
-	font-style: normal;
+  font-weight: 400;
-	src: url("/theme/fonts/Noto-Sans-400/Noto-Sans-400.eot");
+  src: local('Rubik'), local('Rubik-Regular'),
-	src: url("/theme/fonts/Noto-Sans-400/Noto-Sans-400.eot?#iefix") format("embedded-opentype"), local("Noto Sans"), local("Noto-Sans-400"), url("/theme/fonts/Noto-Sans-400/Noto-Sans-400.woff2") format("woff2"), url("/theme/fonts/Noto-Sans-400/Noto-Sans-400.woff") format("woff"), url("/theme/fonts/Noto-Sans-400/Noto-Sans-400.ttf") format("truetype"), url("/theme/fonts/Noto-Sans-400/Noto-Sans-400.svg#NotoSans") format("svg")
+       url('../fonts/rubik-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+       url('../fonts/rubik-v9-latin-regular.woff') format('woff'), /* Modern Browsers */
+       url('../fonts/rubik-v9-latin-regular.ttf') format('truetype'); /* Safari, Android, iOS */
 }
-
+/* rubik-700 - latin */
 @font-face {
-	font-family: 'Noto Sans';
+  font-family: 'Rubik';
-	font-weight: 700;
+  font-style: normal;
-	font-style: normal;
+  font-weight: 700;
-	src: url("/theme/fonts/Noto-Sans-700/Noto-Sans-700.eot");
+  src: local('Rubik Bold'), local('Rubik-Bold'),
-	src: url("/theme/fonts/Noto-Sans-700/Noto-Sans-700.eot?#iefix") format("embedded-opentype"), local("Noto Sans Bold"), local("Noto-Sans-700"), url("/theme/fonts/Noto-Sans-700/Noto-Sans-700.woff2") format("woff2"), url("/theme/fonts/Noto-Sans-700/Noto-Sans-700.woff") format("woff"), url("/theme/fonts/Noto-Sans-700/Noto-Sans-700.ttf") format("truetype"), url("/theme/fonts/Noto-Sans-700/Noto-Sans-700.svg#NotoSans") format("svg")
+       url('../fonts/rubik-v9-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
-}
+       url('../fonts/rubik-v9-latin-500.woff') format('woff'), /* Modern Browsers */
-
+       url('../fonts/rubik-v9-latin-500.ttf') format('truetype'); /* Safari, Android, iOS */
-@font-face {
-	font-family: 'Noto Sans';
-	font-weight: 400;
-	font-style: italic;
-	src: url("/theme/fonts/Noto-Sans-italic/Noto-Sans-italic.eot");
-	src: url("/theme/fonts/Noto-Sans-italic/Noto-Sans-italic.eot?#iefix") format("embedded-opentype"), local("Noto Sans Italic"), local("Noto-Sans-italic"), url("/theme/fonts/Noto-Sans-italic/Noto-Sans-italic.woff2") format("woff2"), url("/theme/fonts/Noto-Sans-italic/Noto-Sans-italic.woff") format("woff"), url("/theme/fonts/Noto-Sans-italic/Noto-Sans-italic.ttf") format("truetype"), url("/theme/fonts/Noto-Sans-italic/Noto-Sans-italic.svg#NotoSans") format("svg")
-}
-
-@font-face {
-	font-family: 'Noto Sans';
-	font-weight: 700;
-	font-style: italic;
-	src: url("/theme/fonts/Noto-Sans-700italic/Noto-Sans-700italic.eot");
-	src: url("/theme/fonts/Noto-Sans-700italic/Noto-Sans-700italic.eot?#iefix") format("embedded-opentype"), local("Noto Sans Bold Italic"), local("Noto-Sans-700italic"), url("/theme/fonts/Noto-Sans-700italic/Noto-Sans-700italic.woff2") format("woff2"), url("/theme/fonts/Noto-Sans-700italic/Noto-Sans-700italic.woff") format("woff"), url("/theme/fonts/Noto-Sans-700italic/Noto-Sans-700italic.ttf") format("truetype"), url("/theme/fonts/Noto-Sans-700italic/Noto-Sans-700italic.svg#NotoSans") format("svg")
 }
+.rubik {
+  font-family: rubik, sans-serif;
+}

homepage/theme/static/fonts/LICENSE

@@ -1,4 +1,7 @@
-Copyright 2018 The Noto Project Authors (github.com/googlei18n/noto-fonts)
+Rubik-Regular.ttf: Copyright 2015 The Rubik Project Authors (meir@sadan.com)
+Rubik-Italic.ttf: Copyright 2015 The Rubik Project Authors (meir@sadan.com)
+Rubik-Medium.ttf: Copyright 2015 The Rubik Project Authors (meir@sadan.com)
+Rubik-MediumItalic.ttf: Copyright 2015 The Rubik Project Authors (meir@sadan.com)
 
 This Font Software is licensed under the SIL Open Font License,
 Version 1.1.

homepage/theme/templates/base.html

@@ -22,8 +22,11 @@
   <link rel="canonical" href="{{ SITEURL }}/{{ href }}">
   {% endif %}
   <link rel="shortcut icon" type="image/x-icon" href="/theme/images/favicon.ico">
-  <link rel="stylesheet" href="/theme/css/tachyons.min.css">
+  <link rel="stylesheet" type="text/css" href="/theme/css/tachyons.min.css">
-  <link rel="stylesheet" href="/theme/css/fix.css">
+  <link rel="stylesheet" type="text/css" href="/theme/css/fix.css">
+  <link rel="stylesheet" type="text/css" href="/theme/css/fonts.css">
+  <link rel="preload" href="/theme//fonts/rubik-v9-latin-regular.woff2" as="font">
+  <link rel="preload" href="/theme//fonts/rubik-v9-latin-500.woff2" as="font">
   <!--
   {% assets filters="libsass,postcss,cssmin", output="css/style.min.css", "css/normalize.css", "css/fonts.css", "css/style.scss" %}
     <link rel="stylesheet" href="/{{ ASSET_URL }}">
@@ -34,7 +37,7 @@
   {% endif %}
 </head>
 {% endblock %}
-<body class="{{ template }} f5 sans-serif lh-copy fnt-cclr-mid-black cclr-dark-white">
+<body class="{{ template }} f5 rubik lh-copy fnt-cclr-mid-black cclr-dark-white">
 <!-- Menu ######################################################### -->
   <div class="menu w-100 cclr-mid-yellow"> <!-- menu -->
     <section class="nav-bar">
@@ -81,7 +84,7 @@
       <div class="w-100 cclr-mid-yellow"> <!--cta-bottom-->
         <div class="pt3 pb6 ph3" id="bg-cta-bottom">
           <div class="mw8 center">
-            <div class="flex flex-wrap justify-around">
+            <div class="flex flex-wrap justify-center">
               <div class="w55 mh3 pt5 tc">
                 <h2 class="f25 lh-solid ma0 mb3">
                   Participate
@@ -107,7 +110,7 @@
                   Ethical internet
                 </h2>
                 <p class="ma0 mb3">
-                  We're working hard to ensure that Offen is independent, cutting-edge and can be sustained for years to come.
+                  We're working hard to ensure that Offen is independent and can be sustained for years to come.
                 </p>
                 <a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" href="{{ PATREON_URL }}" rel="noopener" target="_blank">Support us</a>
               </div>