[CODE] self-host google fonts

assets/css/templates/home.css

@@ -1,3 +1,3 @@
-main{padding-top:14vh}main div.home{text-align:center}main div.home div.logo{font-family:'Boon-Logo', "Verdana", "Arial", sans-serif;font-size:24.5px;line-height:1.2em;font-weight:300;width:11em;margin:0 auto}main div.home div.logo span{color:#2dac01;font-weight:400}main div.home div.logo span.firstname{padding-left:0.1em;padding-right:0.56em}main div.home div.logo span.surname{letter-spacing:-0.036em}main div.home p{margin-top:0.5em;font-size:14px;letter-spacing:-0.02em}@media (max-width: 575px){main{padding-top:10vh}}
+@font-face{src:url("../../fonts/boon_logo-300.woff") format("woff");font-family:"Boon-Logo";font-style:normal;font-weight:300}@font-face{src:url("../../fonts/boon_logo-400.woff") format("woff");font-family:"Boon-Logo";font-style:normal;font-weight:400}main{padding-top:14vh}main div.home{text-align:center}main div.home div.logo{font-family:'Boon-Logo', "Verdana", "Arial", sans-serif;font-size:24.5px;line-height:1.2em;font-weight:300;width:11em;margin:0 auto}main div.home div.logo span{color:#2dac01;font-weight:400}main div.home div.logo span.firstname{padding-left:0.1em;padding-right:0.56em}main div.home div.logo span.surname{letter-spacing:-0.036em}main div.home p{margin-top:0.5em;font-size:15px;letter-spacing:-0.02em}@media (max-width: 575px){main{padding-top:10vh}}
 
 /*# sourceMappingURL=home.css.map */

assets/css/templates/home.css.map

@@ -38,6 +38,6 @@
     "../../vendors/bootstrap/scss/mixins/_grid.scss",
     "../../vendors/bootstrap/scss/mixins/_float.scss"
   ],
-  "mappings": "AAKA,AAAA,IAAI,AAAC,CACH,WAAW,CAAE,IAAK,CAmCnB,AApCD,AAGK,IAHD,CAGF,GAAG,AAAA,KAAK,AAAC,CACP,UAAU,CAAE,MAAO,CA+BpB,AAnCH,AAMO,IANH,CAGF,GAAG,AAAA,KAAK,CAGN,GAAG,AAAA,KAAK,AAAC,CACP,WAAW,CAAE,2CAA4C,CACzD,SAAS,CAAE,MAAO,CAClB,WAAW,CAAE,KAAM,CACnB,WAAW,CAAE,GAAI,CAEjB,KAAK,CAAE,IAAK,CACZ,MAAM,CAAE,MAAO,CAchB,AA3BL,AAeM,IAfF,CAGF,GAAG,AAAA,KAAK,CAGN,GAAG,AAAA,KAAK,CASN,IAAI,AAAC,CACH,KAAK,CCdE,OAAO,CDed,WAAW,CAAE,GAAI,CAQlB,AAzBP,AAeM,IAfF,CAGF,GAAG,AAAA,KAAK,CAGN,GAAG,AAAA,KAAK,CASN,IAAI,AAGD,UAAU,AAAC,CACV,YAAY,CAAE,KAAM,CACpB,aAAa,CAAE,MAAO,CACvB,AArBT,AAeM,IAfF,CAGF,GAAG,AAAA,KAAK,CAGN,GAAG,AAAA,KAAK,CASN,IAAI,AAOD,QAAQ,AAAC,CACR,cAAc,CAAE,QAAS,CAC1B,AAxBT,AA6BI,IA7BA,CAGF,GAAG,AAAA,KAAK,CA0BN,CAAC,AAAC,CACA,UAAU,CAAE,KAAM,CAClB,SAAS,CAAE,IAAK,CAChB,cAAc,CAAE,OAAQ,CACzB,AK+BD,MAAM,EAAL,SAAS,EAAE,KAAK,ELzBnB,AAAA,IAAI,AAAC,CACH,WAAW,CAAE,IAAK,CACnB",
+  "mappings": "AAKA,UAAU,CACR,GAAG,CAAE,qCAAG,CAAmC,cAAM,CACjD,WAAW,CAAE,WAAY,CACzB,UAAU,CAAE,MAAO,CACnB,WAAW,CAAE,GAAI,CAGnB,UAAU,CACR,GAAG,CAAE,qCAAG,CAAmC,cAAM,CACjD,WAAW,CAAE,WAAY,CACzB,UAAU,CAAE,MAAO,CACnB,WAAW,CAAE,GAAI,CAInB,AAAA,IAAI,AAAC,CACH,WAAW,CAAE,IAAK,CAmCnB,AApCD,AAGK,IAHD,CAGF,GAAG,AAAA,KAAK,AAAC,CACP,UAAU,CAAE,MAAO,CA+BpB,AAnCH,AAMO,IANH,CAGF,GAAG,AAAA,KAAK,CAGN,GAAG,AAAA,KAAK,AAAC,CACP,WAAW,CAAE,2CAA4C,CACzD,SAAS,CAAE,MAAO,CAClB,WAAW,CAAE,KAAM,CACnB,WAAW,CAAE,GAAI,CAEjB,KAAK,CAAE,IAAK,CACZ,MAAM,CAAE,MAAO,CAchB,AA3BL,AAeM,IAfF,CAGF,GAAG,AAAA,KAAK,CAGN,GAAG,AAAA,KAAK,CASN,IAAI,AAAC,CACH,KAAK,CC7BE,OAAO,CD8Bd,WAAW,CAAE,GAAI,CAQlB,AAzBP,AAeM,IAfF,CAGF,GAAG,AAAA,KAAK,CAGN,GAAG,AAAA,KAAK,CASN,IAAI,AAGD,UAAU,AAAC,CACV,YAAY,CAAE,KAAM,CACpB,aAAa,CAAE,MAAO,CACvB,AArBT,AAeM,IAfF,CAGF,GAAG,AAAA,KAAK,CAGN,GAAG,AAAA,KAAK,CASN,IAAI,AAOD,QAAQ,AAAC,CACR,cAAc,CAAE,QAAS,CAC1B,AAxBT,AA6BI,IA7BA,CAGF,GAAG,AAAA,KAAK,CA0BN,CAAC,AAAC,CACA,UAAU,CAAE,KAAM,CAClB,SAAS,CAAE,IAAK,CAChB,cAAc,CAAE,OAAQ,CACzB,AKgBD,MAAM,EAAL,SAAS,EAAE,KAAK,ELVnB,AAAA,IAAI,AAAC,CACH,WAAW,CAAE,IAAK,CACnB",
   "names": []
 }

assets/fonts/crimson-text-v8-latin.css

@@ -0,0 +1,54 @@
+/* crimson-text-regular - latin */
+@font-face {
+  font-family: 'Crimson Text';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Crimson Text Regular'), local('CrimsonText-Regular'),
+       url('../fonts/crimson-text-v8-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../fonts/crimson-text-v8-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* crimson-text-italic - latin */
+@font-face {
+  font-family: 'Crimson Text';
+  font-style: italic;
+  font-weight: 400;
+  src: local('Crimson Text Italic'), local('CrimsonText-Italic'),
+       url('../fonts/crimson-text-v8-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../fonts/crimson-text-v8-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* crimson-text-600 - latin */
+@font-face {
+  font-family: 'Crimson Text';
+  font-style: normal;
+  font-weight: 600;
+  src: local('Crimson Text SemiBold'), local('CrimsonText-SemiBold'),
+       url('../fonts/crimson-text-v8-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../fonts/crimson-text-v8-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* crimson-text-600italic - latin */
+@font-face {
+  font-family: 'Crimson Text';
+  font-style: italic;
+  font-weight: 600;
+  src: local('Crimson Text SemiBold Italic'), local('CrimsonText-SemiBoldItalic'),
+       url('../fonts/crimson-text-v8-latin-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../fonts/crimson-text-v8-latin-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* crimson-text-700 - latin */
+@font-face {
+  font-family: 'Crimson Text';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Crimson Text Bold'), local('CrimsonText-Bold'),
+       url('../fonts/crimson-text-v8-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../fonts/crimson-text-v8-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* crimson-text-700italic - latin */
+@font-face {
+  font-family: 'Crimson Text';
+  font-style: italic;
+  font-weight: 700;
+  src: local('Crimson Text Bold Italic'), local('CrimsonText-BoldItalic'),
+       url('../fonts/crimson-text-v8-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../fonts/crimson-text-v8-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}

assets/scss/_fonts.scss

@@ -0,0 +1,83 @@
+/* alegreya-sans-100 - latin */
+@font-face {
+  font-family: 'Alegreya Sans';
+  font-style: normal;
+  font-weight: 100;
+  src: local('Alegreya Sans Thin'), local('AlegreyaSans-Thin'),
+       url('../fonts/alegreya-sans-v8-latin-100.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../fonts/alegreya-sans-v8-latin-100.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* alegreya-sans-300 - latin */
+@font-face {
+  font-family: 'Alegreya Sans';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Alegreya Sans Light'), local('AlegreyaSans-Light'),
+       url('../fonts/alegreya-sans-v8-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../fonts/alegreya-sans-v8-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* alegreya-sans-regular - latin */
+@font-face {
+  font-family: 'Alegreya Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: /*local('Alegreya Sans Regular'), local('AlegreyaSans-Regular'),*/
+       url('../fonts/alegreya-sans-v8-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../fonts/alegreya-sans-v8-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* alegreya-sans-italic - latin */
+@font-face {
+  font-family: 'Alegreya Sans';
+  font-style: italic;
+  font-weight: 400;
+  src: local('Alegreya Sans Italic'), local('AlegreyaSans-Italic'),
+       url('../fonts/alegreya-sans-v8-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../fonts/alegreya-sans-v8-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* alegreya-sans-500 - latin */
+@font-face {
+  font-family: 'Alegreya Sans';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Alegreya Sans Medium'), local('AlegreyaSans-Medium'),
+       url('../fonts/alegreya-sans-v8-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../fonts/alegreya-sans-v8-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* alegreya-sans-500italic - latin */
+@font-face {
+  font-family: 'Alegreya Sans';
+  font-style: italic;
+  font-weight: 500;
+  src: local('Alegreya Sans Medium Italic'), local('AlegreyaSans-MediumItalic'),
+       url('../fonts/alegreya-sans-v8-latin-500italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../fonts/alegreya-sans-v8-latin-500italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* alegreya-sans-700 - latin */
+@font-face {
+  font-family: 'Alegreya Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Alegreya Sans Bold'), local('AlegreyaSans-Bold'),
+       url('../fonts/alegreya-sans-v8-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../fonts/alegreya-sans-v8-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+
+/* crimson-text-regular - latin */
+@font-face {
+  font-family: 'Crimson Text';
+  font-style: normal;
+  font-weight: 400;
+  src: /*local('Crimson Text Regular'), local('CrimsonText-Regular'),*/
+       url('../fonts/crimson-text-v8-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../fonts/crimson-text-v8-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* crimson-text-700 - latin */
+@font-face {
+  font-family: 'Crimson Text';
+  font-style: normal;
+  font-weight: 700;
+  src: /*local('Crimson Text Bold'), local('CrimsonText-Bold'),*/
+       url('../fonts/crimson-text-v8-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../fonts/crimson-text-v8-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}

assets/scss/main.scss

@@ -1,12 +1,14 @@
 /* STYLE for jannikbeyerstedt.de
  * generic styles
  *
- * main font: Alegreya Sans
- * headings: Crimson Text
+ * main font: Alegreya Sans (100,300,400,400italic,500,500italic,700)
+ * headings: Crimson Text (400,700)
  * Logo: Boon
  */
 @import "mainvariables";
 
+@import "fonts";
+
 body {
   margin: 0;
   font-family: 'Alegreya Sans', "Verdana", "Arial", sans-serif;

assets/scss/templates/home.scss

@@ -3,6 +3,21 @@
  */
 @import "../mainvariables";
 
+@font-face {
+  src: url("../../fonts/boon_logo-300.woff") format("woff");
+  font-family: "Boon-Logo";
+  font-style: normal;
+  font-weight: 300;
+}
+
+@font-face {
+  src: url("../../fonts/boon_logo-400.woff") format("woff");
+  font-family: "Boon-Logo";
+  font-style: normal;
+  font-weight: 400;
+}
+
+
 main {
   padding-top: 14vh;
 
@@ -34,7 +49,7 @@ main {
 
     p {
       margin-top: 0.5em;
-      font-size: 14px;
+      font-size: 15px;
       letter-spacing: -0.02em;
     }
 

site/snippets/base/html-head.php

@@ -26,18 +26,12 @@ if( $page->isHomePage() ) {
   <meta name="robots" content="<?php echo $page->meta_robots()->html() ?>">
 <?php endif; ?>
 
-  <?php echo css('assets/css/foundation.css?v2') ?>
+  <?php echo css('assets/css/foundation.css?v1.1') ?>
 
-  <?php echo css('assets/css/main.css?v2') ?>
+  <?php echo css('assets/css/main.css?v1.1') ?>
 
   <?php echo css('@auto') ?>
 
-  <!-- Google web fonts -->
-  <link href='https://fonts.googleapis.com/css?family=Alegreya+Sans:400,100,300,400italic,500,500italic,700' rel='stylesheet' type='text/css'>
-  <link href='https://fonts.googleapis.com/css?family=Crimson+Text:400,700' rel='stylesheet' type='text/css'>
-
-  <?php echo css('assets/fonts/boon_logo.css') ?>
-
   <link rel="apple-touch-icon" sizes="180x180" href="<?php echo url('/assets/favicons/apple-touch-icon-180x180.png')?>">
   <link rel="mask-icon" href="<?php echo url('/assets/favicons/safari-pinned-tab.svg')?>" color="#5bbad5">
   <link rel="icon" type="image/png" href="<?php echo url('/assets/favicons/favicon-32x32.png')?>" sizes="32x32">
@@ -51,6 +45,5 @@ if( $page->isHomePage() ) {
   <meta name="msapplication-TileImage" content="<?php echo url('/assets/favicons/mstile-144x144.png')?>">
   <meta name="msapplication-config" content="<?php echo url('/assets/favicons/browserconfig.xml')?>">
   <meta name="theme-color" content="#ffffff">
-
 </head>
 <body>

site/snippets/blog-htmlhead.php

@@ -26,16 +26,12 @@ if( $page->isHomePage() ) {
   <meta name="robots" content="<?php echo $page->meta_robots()->html() ?>">
 <?php endif; ?>
 
-  <?php echo css('assets/css/foundation.css') ?>
+  <?php echo css('assets/css/foundation.css?v1.1') ?>
 
-  <?php echo css('assets/css/main.css') ?>
+  <?php echo css('assets/css/main.css?v1.1') ?>
 
   <?php echo css('assets/css/blog.css') ?>
 
-  <!-- Google web fonts -->
-  <link href='https://fonts.googleapis.com/css?family=Alegreya+Sans:400,100,300,400italic,500,500italic,700' rel='stylesheet' type='text/css'>
-  <link href='https://fonts.googleapis.com/css?family=Crimson+Text:400,700' rel='stylesheet' type='text/css'>
-
   <link rel="apple-touch-icon" sizes="180x180" href="<?php echo url('/assets/favicons/apple-touch-icon-180x180.png')?>">
   <link rel="mask-icon" href="<?php echo url('/assets/favicons/safari-pinned-tab.svg')?>" color="#5bbad5">
   <link rel="icon" type="image/png" href="<?php echo url('/assets/favicons/favicon-32x32.png')?>" sizes="32x32">