Added font-display: swap to fonts

css/fontello/css/fontello.css

@@ -7,6 +7,7 @@
        url('../font/fontello.svg?13439518#fontello') format('svg');
   font-weight: normal;
   font-style: normal;
+  font-display: swap;
 }
 /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
 /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
@@ -65,4 +66,4 @@
 .icon-down-circle:before { content: '\e809'; } /* '' */
 .icon-left-circle:before { content: '\e80a'; } /* '' */
 .icon-right-circle:before { content: '\e80b'; } /* '' */
-.icon-down-open:before { content: '\e800'; } /* '' */
+.icon-down-open:before { content: '\e800'; } /* '' */

css/fonts.css

@@ -7,7 +7,7 @@
          url('fonts/hack/hack-regular.woff') format('woff');
     font-weight: normal;
     font-style: normal;
-
+    font-display: swap;
 }
 
 /*
@@ -22,6 +22,7 @@
          url('fonts/opensans/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
     font-weight: normal;
     font-style: normal;
+    font-display: swap;
 }
 @font-face {
     font-family: 'opensans-italic';
@@ -32,6 +33,7 @@
          url('fonts/opensans/OpenSans-Italic-webfont.svg#open_sansitalic') format('svg');
     font-weight: normal;
     font-style: normal;
+    font-display: swap;
 }
 @font-face {
     font-family: 'opensans-light';
@@ -42,6 +44,7 @@
          url('fonts/opensans/OpenSans-Light-webfont.svg#open_sanslight') format('svg');
     font-weight: normal;
     font-style: normal;
+    font-display: swap;
 }
 @font-face {
     font-family: 'opensans-light-italic';
@@ -52,6 +55,7 @@
          url('fonts/opensans/OpenSans-LightItalic-webfont.svg#open_sanslight_italic') format('svg');
     font-weight: normal;
     font-style: normal;
+    font-display: swap;
 }
 @font-face {
     font-family: 'opensans-semibold';
@@ -62,6 +66,7 @@
          url('fonts/opensans/OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg');
     font-weight: normal;
     font-style: normal;
+    font-display: swap;
 }
 @font-face {
     font-family: 'opensans-semibold-italic';
@@ -72,6 +77,7 @@
          url('fonts/opensans/OpenSans-SemiboldItalic-webfont.svg#open_sanssemibold_italic') format('svg');
     font-weight: normal;
     font-style: normal;
+    font-display: swap;
 }
 @font-face {
     font-family: 'opensans-bold';
@@ -82,6 +88,7 @@
          url('fonts/opensans/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
     font-weight: normal;
     font-style: normal;
+    font-display: swap;
 }
 @font-face {
     font-family: 'opensans-bold-italic';
@@ -92,6 +99,7 @@
          url('fonts/opensans/OpenSans-BoldItalic-webfont.svg#open_sansbold_italic') format('svg');
     font-weight: normal;
     font-style: normal;
+    font-display: swap;
 }
 @font-face {
     font-family: 'opensans-extrabold';
@@ -102,6 +110,7 @@
          url('fonts/opensans/OpenSans-ExtraBold-webfont.svg#open_sansextrabold') format('svg');
     font-weight: normal;
     font-style: normal;
+    font-display: swap;
 }
 @font-face {
     font-family: 'opensans-extrabold-italic';
@@ -112,6 +121,7 @@
          url('fonts/opensans/OpenSans-ExtraBoldItalic-webfont.svg#open_sansextrabold_italic') format('svg');
     font-weight: normal;
     font-style: normal;
+    font-display: swap;
 }
 
 /*
@@ -126,6 +136,7 @@
          url('fonts/librebaskerville/librebaskerville-bold-webfont.svg#libre_baskervillebold') format('svg');
     font-weight: normal;
     font-style: normal;
+    font-display: swap;
 }
 @font-face {
     font-family: 'librebaskerville-italic';
@@ -136,6 +147,7 @@
          url('fonts/librebaskerville/librebaskerville-italic-webfont.svg#libre_baskervilleitalic') format('svg');
     font-weight: normal;
     font-style: normal;
+    font-display: swap;
 }
 @font-face {
     font-family: 'librebaskerville-regular';
@@ -146,6 +158,7 @@
          url('fonts/librebaskerville/librebaskerville-regular-webfont.svg#libre_baskervilleregular') format('svg');
     font-weight: normal;
     font-style: normal;
+    font-display: swap;
 }
 
 

css/forkawesome/css/fork-awesome.css

@@ -18,6 +18,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
   src: url('../fonts/forkawesome-webfont.eot?#iefix&v=1.1.5') format('embedded-opentype'), url('../fonts/forkawesome-webfont.woff2?v=1.1.5') format('woff2'), url('../fonts/forkawesome-webfont.woff?v=1.1.5') format('woff'), url('../fonts/forkawesome-webfont.ttf?v=1.1.5') format('truetype'), url('../fonts/forkawesome-webfont.svg?v=1.1.5#forkawesomeregular') format('svg');
   font-weight: normal;
   font-style: normal;
+  font-display: swap;
 }
 .fa {
   display: inline-block;

index.html

@@ -16,6 +16,10 @@
     <meta property="og:image" content="https://dennispotter.eu/images/avatar.jpg" />
     <meta property="og:description" content="I get excited by the endless capabilities of modern computers, enjoy solving (everyday) problems by writing programs, and love a good read!" />
 
+    <!-- Preloads
+    ================================================== -->
+    <link rel="preload" href="fonts/opensans/OpenSans-Regular-webfont.woff" as="font">
+
     <!-- Mobile Specific Metas
     ================================================== -->
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
@@ -24,8 +28,6 @@
     ================================================== -->
     <link rel="stylesheet" href="css/default.css">
     <link rel="stylesheet" href="css/layout.css">
-    <link rel="stylesheet" href="css/media-queries.css">
-    <link rel="stylesheet" href="css/magnific-popup.css">
 
     <!-- Script
     ================================================== -->
@@ -35,10 +37,6 @@
     ================================================== -->
     <link rel="shortcut icon" href="favicon.gif" >
 
-    <!-- Preloads
-    ================================================== -->
-    <link rel="preload" href="fonts/opensans/OpenSans-Regular-webfont.woff" as="font">
-
 
 </head>
 <body>
@@ -551,5 +549,10 @@
     <script src="js/init.js"></script>
     <script src="js/typed.js"></script>
 
+    <!-- CSS
+    ================================================== -->
+    <link rel="stylesheet" href="css/media-queries.css">
+    <link rel="stylesheet" href="css/magnific-popup.css">
+
 </body>
 </html>