html - CSS Web フォントを HTML5 ローカル ストレージに保存する

Question

サイトを構築しているときに、Web フォントを読み込むとモバイルでのページ レンダリングが大幅に遅くなることがわかったので、小さいデバイスでは無効にしました。Web フォントを HTML5 ローカル ストレージに保存することで、この問題を回避できると聞いたことがあります。ガーディアンで働いている友人は、彼らのモバイル サイトがそのフォントを base64 でエンコードされた文字列としてローカル ストレージに保存していると私に言いました。

フォントを保存する方法は簡単に理解できますが、フォントを取得するときにブラウザにロードする最良の方法を見つけようとしています。Javascript を使用すると、ページの先頭にあるスタイル タグに base64 文字列を追加できますが、ページの重みに注意する必要がある場合は、すべてのページのデータ サイズに追加することになります。font-face CSS 宣言をロードするより効率的な方法はありますか? たとえば、別の CSS ファイルにある場合、ブラウザはそれをキャッシュします。

編集 - - - - - - - - - - - - - - - - - - - - - - -

私はこの例を理解しました..デバイスの画面が小さい場合は、localStorage でフォント データを確認します。localStorage に存在しない場合は、ajax リクエストを実行し、データをページの先頭に追加して localStorage に保存します。存在する場合は、追加するだけです。これは、モバイルで Web フォントを読み込む効率的な方法のように見えますか?

   $(document).ready(function () {
        if ($(window).width() < 481) {
            if (typeof(Storage) !== 'undefined') {
                if (localStorage.getItem('base64fonts') === null) {
                    $.ajax({
                        url: 'fonts-base64.css',
                        success: function(response){
                            $('head').append('<style>' + response + '</style>');
                            localStorage.setItem('base64fonts', response);
                        },
                        dataType: 'text'
                    });
                } else {
                    $('head').append('<style>' + localStorage.getItem('base64fonts') + '</style>');
                }
            }
        }
    })