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();
});
}