web-dev-qa-db-ja.com

ページが読み込まれた後にGoogleフォントを動的に読み込む

ユーザーにページを表示するフォントを選択してもらいたいと思います。 ここ は、GoogleがJavaScriptを使用することをお勧めする方法です。

WebFontConfig = {
    google: {
        families: ['Tangerine', 'Cantarell']
    }
};

(function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
            '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
      })();

これを変更して、ページのロード後にフォントを再取得できるようにするにはどうすればよいですか？

javascriptjquerycssfont-facegoogle-font-api
23
Alexis

このgithubリポジトリのWebFont.loadコマンドをチェックしてください：

https://github.com/typekit/webfontloader

必要なフォントを動的にロードできます。

 <script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script> 
  <script> 
        WebFont.load({
                    google: { 
                           families: ['Droid Sans', 'Droid Serif'] 
                     } 
         }); 
   </script>
31
mccannf