Change the way fonts are loaded to allow FOUT

FOUT is Flash Of Unstyled Text, it's a method to initially show a built
in font and then change the font once our custom one is loaded.

Using FontFaceObserver allows us to do this easily.

_layouts/default.html

@@ -12,6 +12,9 @@
     <link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/style.css" />
     <link rel="alternate" type="application/rss+xml" title="{{ site.name }} - {{ site.description }}" href="{{ site.baseurl }}/feed.xml" />
 
+    <script src="{{ '/javascripts/fontfaceobserver.js' | prepend: site.baseurl }}"></script>
+    <script src="{{ '/javascripts/blog.js' | prepend: site.baseurl }}"></script>
+
     <!-- Created with Arabic Jekyll - http://github.com/a3ammar/arabic-jekyll -->
   </head>
 

_sass/_highlights.scss

@@ -12,7 +12,7 @@
 }
 
 code {
-  font-family: $code-font;
+  font-family: $monospace-font-family;
   font-weight: 400;
   font-size: 13px;
   unicode-bidi: embed;

_sass/_variables.scss

@@ -15,9 +15,11 @@ $white: #fff;
 $red: #dd2b55;
 
 $base-font-family: Helvetica, Arial, sans-serif;
-$heading-font: Noto Kufi Arabic, $base-font-family;
-$body-font: Noto Naskh Arabic, $base-font-family;
-$code-font: Kawkab Mono, Bitstream Vera Sans Mono, Courier, monospace;
+$heading-font-family: Noto Kufi Arabic, $base-font-family;
+$body-font-family: Noto Naskh Arabic, $base-font-family;
+
+$monospace-font-family: Bitstream Vera Sans Mono, Courier, monospace;
+$code-font-family: Kawkab Mono, $monospace-font-family;
 
 // Mobile breakpoints
 @mixin mobile {

javascripts/blog.js

@@ -0,0 +1,34 @@
+var notoNaskhRegular = new FontFaceObserver("Noto Naskh Arabic", { weight: 400 });
+var notoNaskhBold    = new FontFaceObserver("Noto Naskh Arabic", { weight: 700 });
+var notoKufiRegular  = new FontFaceObserver("Noto Kufi Arabic",  { weight: 400 });
+var notoKufiBold     = new FontFaceObserver("Noto Kufi Arabic",  { weight: 700 });
+var kawkabMono       = new FontFaceObserver("Kawkab Mono",       { weight: 400 });
+
+var arabicTest = "اهلا";
+var fontLoadTimeout = 5000;
+
+Promise.all([
+  notoNaskhRegular.load(arabicTest, fontLoadTimeout),
+  notoNaskhBold.load(arabicTest, fontLoadTimeout)
+]).then(function() {
+  document.documentElement.className += " naskh-font-loaded";
+}, function() {
+  console.log("Could not load Noto Naskh Arabic font");
+});
+
+Promise.all([
+  notoKufiRegular.load(arabicTest, fontLoadTimeout),
+  notoKufiBold.load(arabicTest, fontLoadTimeout)
+]).then(function() {
+  document.documentElement.className += " kufi-font-loaded";
+}, function() {
+  console.log("Could not load Noto Kufi Arabi font");
+});
+
+Promise.all([
+  kawkabMono.load(arabicTest, fontLoadTimeout)
+]).then(function() {
+  document.documentElement.className += " kawkab-font-loaded";
+}, function() {
+  console.log("could not load KawkabMono font");
+});

style.scss

@@ -25,7 +25,7 @@ body {
   min-height: 100%;
   flex-direction: column;
   background: $white;
-  font: 19px/1.4 $body-font;
+  font: 19px/1.4 $base-font-family;
   line-height: 1.6;
   color: $darkGray;
 }
@@ -38,7 +38,6 @@ body {
 }
 
 h1, h2, h3, h4, h5, h6 {
-  font-family: $heading-font;
   color: $darkerGray;
   font-weight: bold;
 
@@ -206,7 +205,6 @@ blockquote {
   margin: 0;
   color: $darkGray;
   cursor: pointer;
-  font-family: $heading-font;
   font-weight: normal;
   font-size: 28px;
 }
@@ -224,7 +222,6 @@ blockquote {
 nav {
   float: left;
   margin-top: 23px; // @TODO: Vertically middle align
-  font-family: $heading-font;
   font-size: 18px;
 
   @include mobile {
@@ -275,7 +272,6 @@ nav {
   }
 
   .read-more {
-    font-family: $heading-font;
     font-size: 15px;
   }
 }
@@ -297,7 +293,6 @@ nav {
 
 .date {
   margin-top: 2em;
-  font-family: $heading-font;
   text-align: left;
   color: $gray;
 }
@@ -314,6 +309,27 @@ footer {
   text-align: center;
 }
 
+
+//
+// FOUT fonts
+//
+
+.naskh-font-loaded {
+  body { font-family: $body-font-family; }
+}
+
+.kufi-font-loaded {
+  h1, h2, h3, h4, h5, h6 { font-family: $heading-font-family; }
+  .site-name             { font-family: $heading-font-family; }
+  nav                    { font-family: $heading-font-family; }
+  .read-more             { font-family: $heading-font-family; }
+  .date                  { font-family: $heading-font-family; }
+}
+
+.kawkab-font-loaded {
+  code { font-family: $code-font-family; }
+}
+
 // Settled on moving the import of syntax highlighting to the bottom of the CSS
 // ... Otherwise it really bloats up the top of the CSS file and makes it difficult to find the start
 @import "highlights";