diff --git a/public/500.html b/public/500.html
index 46defe6d..5495427c 100644
--- a/public/500.html
+++ b/public/500.html
@@ -124,7 +124,7 @@
         border-color: #B2B2B2;
       }
 
-      .fontsLoaded {
+      .fontsLoaded body {
         font-family: sofiapro, Helvetica, Arial, sans-serif;
         opacity: 1;
       }
@@ -160,8 +160,19 @@
       }
     </style>
 
+    <script>
+      (function(document){
+        // Optimization for repeated views
+        // Small script to check if fonts are already loaded
+        // Adding as little footprint as possible to <head> since that will slow down rendering.
+        if (document.fonts && sessionStorage.fontsLoaded) {
+          // Optimization for Repeated views - i.e. page refresh hits the same error
+          document.documentElement.classList.add("fontsLoaded");
+        }
+      })(document);
+    </script>
   </head>
-  <body id="body">
+  <body>
     <div class="content">
       <div class="errorCode">500</div>
       <h1>Sorry, it seems we did something wrong.</h1>
@@ -175,9 +186,15 @@
         // Browsers that don't support FontFaceSet, will show only system fonts
         if (document.fonts) {
 
+          // Check if Promise exists in window
+          var hasFeaturePromise = typeof window.Promise !== 'undefined' &&
+            typeof window.Promise.reject !== 'undefined' &&
+            Object.prototype.toString.call(Promise.resolve()) === '[object Promise]';
+
           // Optimization for Repeated views - i.e. page refresh hits the same error
-          if (sessionStorage.fontsLoaded) {
-            document.getElementById("body").classList.add("fontsLoaded");
+          // If there's no Promise available, we also revert to @font-face loading
+          if (sessionStorage.fontsLoaded || !hasFeaturePromise) {
+            document.documentElement.classList.add("fontsLoaded");
             return;
           }
 
@@ -190,7 +207,7 @@
               values.forEach(function(f) {
                 document.fonts.add(f);
               });
-              document.getElementById("body").classList.add("fontsLoaded");
+              document.documentElement.classList.add("fontsLoaded");
 
               // Optimization for Repeat Views
               sessionStorage.fontsLoaded = true;
diff --git a/public/index.html b/public/index.html
index 5ca08a00..7954e4ef 100644
--- a/public/index.html
+++ b/public/index.html
@@ -62,11 +62,76 @@
       }
 
     </style>
+    <script>
+      (function(document){
+        // Optimization for repeated views
+        // Small script to check if fonts are already loaded
+        // Adding as little footprint as possible to <head> since that will slow down rendering.
+        if (sessionStorage.fontsLoaded) {
+          document.documentElement.classList.add("fontsLoaded");
+        }
+      })(document);
+    </script>
 
     <link rel="stylesheet" href="%PUBLIC_URL%/static/reactDates.css" />
   </head>
   <body>
     <div id="root"><!--!body--></div>
+    <script>
+      (function(document){
+        // Check if Promise exists in window
+        var hasFeaturePromise = typeof window.Promise !== 'undefined' &&
+          typeof window.Promise.reject !== 'undefined' &&
+          Object.prototype.toString.call(Promise.resolve()) === '[object Promise]';
+
+        // Optimization for repeated views
+        // No need to loading functionality if they are already loaded.
+        // If there's no Promise available, we also revert to @font-face loading
+        if (sessionStorage.fontsLoaded || !hasFeaturePromise) {
+          // Ensure that fontsLoaded class is added to <html> element
+          document.documentElement.classList.add('fontsLoaded');
+          return;
+        }
+
+        // Inlined Font Face Observer to speed up loading of fonts.
+        /* Font Face Observer v2.0.13 - © Bram Stein. License: BSD-3-Clause */
+        (function(){function l(a,b){document.addEventListener?a.addEventListener("scroll",b,!1):a.attachEvent("scroll",b)}function m(a){document.body?a():document.addEventListener?document.addEventListener("DOMContentLoaded",function c(){document.removeEventListener("DOMContentLoaded",c);a()}):document.attachEvent("onreadystatechange",function k(){if("interactive"==document.readyState||"complete"==document.readyState)document.detachEvent("onreadystatechange",k),a()})};function r(a){this.a=document.createElement("div");this.a.setAttribute("aria-hidden","true");this.a.appendChild(document.createTextNode(a));this.b=document.createElement("span");this.c=document.createElement("span");this.h=document.createElement("span");this.f=document.createElement("span");this.g=-1;this.b.style.cssText="max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;";this.c.style.cssText="max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;";
+        this.f.style.cssText="max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;";this.h.style.cssText="display:inline-block;width:200%;height:200%;font-size:16px;max-width:none;";this.b.appendChild(this.h);this.c.appendChild(this.f);this.a.appendChild(this.b);this.a.appendChild(this.c)}
+        function t(a,b){a.a.style.cssText="max-width:none;min-width:20px;min-height:20px;display:inline-block;overflow:hidden;position:absolute;width:auto;margin:0;padding:0;top:-999px;white-space:nowrap;font-synthesis:none;font:"+b+";"}function y(a){var b=a.a.offsetWidth,c=b+100;a.f.style.width=c+"px";a.c.scrollLeft=c;a.b.scrollLeft=a.b.scrollWidth+100;return a.g!==b?(a.g=b,!0):!1}function z(a,b){function c(){var a=k;y(a)&&a.a.parentNode&&b(a.g)}var k=a;l(a.b,c);l(a.c,c);y(a)};function A(a,b){var c=b||{};this.family=a;this.style=c.style||"normal";this.weight=c.weight||"normal";this.stretch=c.stretch||"normal"}var B=null,C=null,E=null,F=null;function G(){if(null===C)if(J()&&/Apple/.test(window.navigator.vendor)){var a=/AppleWebKit\/([0-9]+)(?:\.([0-9]+))(?:\.([0-9]+))/.exec(window.navigator.userAgent);C=!!a&&603>parseInt(a[1],10)}else C=!1;return C}function J(){null===F&&(F=!!document.fonts);return F}
+        function K(){if(null===E){var a=document.createElement("div");try{a.style.font="condensed 100px sans-serif"}catch(b){}E=""!==a.style.font}return E}function L(a,b){return[a.style,a.weight,K()?a.stretch:"","100px",b].join(" ")}
+        A.prototype.load=function(a,b){var c=this,k=a||"BESbswy",q=0,D=b||3E3,H=(new Date).getTime();return new Promise(function(a,b){if(J()&&!G()){var M=new Promise(function(a,b){function e(){(new Date).getTime()-H>=D?b():document.fonts.load(L(c,'"'+c.family+'"'),k).then(function(c){1<=c.length?a():setTimeout(e,25)},function(){b()})}e()}),N=new Promise(function(a,c){q=setTimeout(c,D)});Promise.race([N,M]).then(function(){clearTimeout(q);a(c)},function(){b(c)})}else m(function(){function u(){var b;if(b=-1!=
+        f&&-1!=g||-1!=f&&-1!=h||-1!=g&&-1!=h)(b=f!=g&&f!=h&&g!=h)||(null===B&&(b=/AppleWebKit\/([0-9]+)(?:\.([0-9]+))/.exec(window.navigator.userAgent),B=!!b&&(536>parseInt(b[1],10)||536===parseInt(b[1],10)&&11>=parseInt(b[2],10))),b=B&&(f==v&&g==v&&h==v||f==w&&g==w&&h==w||f==x&&g==x&&h==x)),b=!b;b&&(d.parentNode&&d.parentNode.removeChild(d),clearTimeout(q),a(c))}function I(){if((new Date).getTime()-H>=D)d.parentNode&&d.parentNode.removeChild(d),b(c);else{var a=document.hidden;if(!0===a||void 0===a)f=e.a.offsetWidth,
+        g=n.a.offsetWidth,h=p.a.offsetWidth,u();q=setTimeout(I,50)}}var e=new r(k),n=new r(k),p=new r(k),f=-1,g=-1,h=-1,v=-1,w=-1,x=-1,d=document.createElement("div");d.dir="ltr";t(e,L(c,"sans-serif"));t(n,L(c,"serif"));t(p,L(c,"monospace"));d.appendChild(e.a);d.appendChild(n.a);d.appendChild(p.a);document.body.appendChild(d);v=e.a.offsetWidth;w=n.a.offsetWidth;x=p.a.offsetWidth;I();z(e,function(a){f=a;u()});t(e,L(c,'"'+c.family+'",sans-serif'));z(n,function(a){g=a;u()});t(n,L(c,'"'+c.family+'",serif'));
+        z(p,function(a){h=a;u()});t(p,L(c,'"'+c.family+'",monospace'))})})};"object"===typeof module?module.exports=A:(window.FontFaceObserver=A,window.FontFaceObserver.prototype.load=A.prototype.load);}());
+
+
+        // Fonts we use (Check font-face rules from <style> tag in <head> section)
+        var sofiaproRegular = new FontFaceObserver('sofiapro', { weight: 400 });
+        var sofiaproMedium = new FontFaceObserver('sofiapro', { weight: 500 });
+        var sofiaproSemibold = new FontFaceObserver('sofiapro', { weight: 600 });
+        var sofiaproBold = new FontFaceObserver('sofiapro', { weight: 700 });
+
+        var fontLoadingTimeout = 5000;
+
+        Promise.all([
+          sofiaproRegular.load(null, fontLoadingTimeout),
+          sofiaproMedium.load(null, fontLoadingTimeout),
+          sofiaproSemibold.load(null, fontLoadingTimeout),
+          sofiaproBold.load(null, fontLoadingTimeout)
+        ])
+          .then(function () {
+            document.documentElement.classList.add("fontsLoaded");
+
+            // Optimization for repeated views
+            sessionStorage.fontsLoaded = true;
+          })
+          .catch(function () {
+            // If loading takes over 5 seconds, let's just show fallback fonts.
+            console.warn('Font loading took too long time - using system fonts instead.');
+          });
+      })(document);
+    </script>
+
     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDZhsJGsRv0c9HykUHfnVAIVOb1tWtqrTg&libraries=places"></script>
     <!--
          Stripe script should be on every page, not just the pages that
diff --git a/src/marketplaceIndex.css b/src/marketplaceIndex.css
index bb8be7fe..3fc27ffa 100644
--- a/src/marketplaceIndex.css
+++ b/src/marketplaceIndex.css
@@ -4,7 +4,7 @@
 /* ================ Fonts ================ */
 
 body {
-  font-family: "sofiapro", Helvetica, Arial, sans-serif;
+  font-family: Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased; /* http://szafranek.net/blog/2009/02/22/font-smoothing-explained/ */
   -moz-osx-font-smoothing: grayscale; /* http://szafranek.net/blog/2009/02/22/font-smoothing-explained/ */
   text-rendering: optimizeSpeed;
@@ -75,7 +75,7 @@ label {
 }
 
 button {
-  font-family: "sofiapro", Helvetica, Arial, sans-serif;
+  font-family: Helvetica, Arial, sans-serif;
 }
 
 select {
@@ -91,3 +91,12 @@ textarea {
   min-height: 48px;
   padding: 0 0 5px 0;
 }
+
+:global(.fontsLoaded) {
+  & body {
+    font-family: "sofiapro", Helvetica, Arial, sans-serif;
+  }
+  & button {
+    font-family: "sofiapro", Helvetica, Arial, sans-serif;
+  }
+}
