Web Font LoaderはJavaScriptライブラリなのでJavaScriptを無効にしているブラウザの場合、ウェブフォントが利用できなくなってしまいます。そこで、このようなjsをオフにしているユーザ（全体の1%ほどだと言われています)にも配慮した利用法のメモです。
<noscript>を利用
<noscript>要素はJavaScriptを無効にしているブラウザのみに子要素が認識される特集な要素で、JavaScriptが有効なブラウザは<noscript>内を完全に無視します。ですから、JavaScript無効ユーザーには<noscript>内からウェブフォント用のcssをロードしたり<style>で@font-faceをセットします。
<!-- head内 -->
<noscript>
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
</noscript>FOUTは発生しますが、ウェブフォントが利用できるようになります。
jsが有効な場合のみ透明にする
FOUTを防ぐためウェブフォントロード中はテキストを透明にする場合、JavaScriptが有効な場合のみvisibilityをhiddenにセットします。JavaScriptが有効かどうかでスタイルを分けるにはJavaScriptから適当なクラス（例えば.js)を<html>等にセットします。.wf-loadingや.wf-<familyname>-<fvd>-loadingで分けても良いですが、Web Font Loaderを非同期で読み込んでいたりフッターで読み込んでいたりすると、これらのクラスが追加されるのが遅くなる場合も考えられますから、外部のスクリプトやcssよりも前に<head>でインラインスクリプトから追加するのがオススメです。
<script>
//<head>内で
document.documentElement.className = "js";
</script>
p{
font-family: 'Lobster', serif;
}
.js p{
visibility: hidden;
}
.wf-lobster-n4-active p,.wf-lobster-n4-inactive p{
visibility:visible;
}JavaScritpが無効になっている場合にvisibilityをhiddenにセットしてしまうと永遠にテキストが表示されない可能性もあります。