how to load otf fonts in html faster

Put Fonts on CDN

The .htaccess or httpd.conf Code

The code can be placed with the .htaccess file or httpd.conf file:

# Apache config
<FilesMatch ".(eot|ttf|otf|woff)">
	Header set Access-Control-Allow-Origin "*"
</FilesMatch>

# nginx config
if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){
	add_header Access-Control-Allow-Origin *;
}

Use Non-Blocking CSS Loading

<link rel="stylesheet" type="text/css" href="fonts.css" media="none" onload="this.media='all';">
<link rel="stylesheet" type="text/css" href="style.css" media="none" onload="this.media='all';">

Essentially using media=none let’s the browser download the stylesheet without blocking rendering, so when the stylesheet has loaded, setting the media to its desired setting will then render the screen as it should. 

Separate Font Selectors

h1 { font-family: Arial, serif; } /* basic system font */
.fontsloaded h1 { font-family:  'MySpecialFont', serif; } /* custom system font */

<link href="fonts.css" onload="document.body.className+=' fontsloaded';" rel="stylesheet" type="text/css" >

Storing Fonts in localStorage

var md5 = 'e90ba95faca6e63b5516ed839f4514ec',
    key = 'fonts',
    cache;

function insertFont(value) {
  var style = document.createElement('style');
  style.innerHTML = value;
  document.head.appendChild(style);
}

// PRE-RENDER
try {
  cache = window.localStorage.getItem(key);
  if (cache) {
    cache = JSON.parse(cache);
    if (cache.md5 == md5) {
      insertFont(cache.value);
    } else {
      // Busting cache when md5 doesn't match
      window.localStorage.removeItem(key);
      cache = null;
    }
  }
} catch(e) {
  // Most likely LocalStorage disabled
  return
}

// POST-RENDER
if (!cache) {
  // Fonts not in LocalStorage or md5 did not match
  window.addEventListener('load', function() {
    var request = new XMLHttpRequest(),
        response;
    request.open('GET', '/path/to/fonts.json', true);
    request.onload = function() {
      if (this.status == 200) {
        try {
          response = JSON.parse(this.response);
          insertFont(response.value);
          window.localStorage.setItem(key, this.response);
        } catch(e) {
          // LocalStorage is probably full
        }
      }
    };
    request.send();
  });
}