1. ホーム
  2. css

[解決済み] Googleフォントのダウンロードとそれを使用するオフラインサイトの設定

2022-04-27 09:12:59

質問

あるテンプレートで、次のようなGoogleフォントを参照しています。

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300' rel='stylesheet' type='text/css'>

ダウンロードし、常時オフラインで動作している私のページで使用するように設定するにはどうすればよいですか?

どのように解決するのですか?

Google Fontsにアクセスするだけです。 http://www.google.com/fonts/ をクリックし、気に入ったフォントをコレクションに追加して、ダウンロードボタンを押してください。そして、@fontfaceを使って、このフォントをあなたのウェブページに接続するだけです。 ちなみに、あなたが使っているリンクを開くと、@fontfaceの使用例が表示されます。

http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300

例として

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}

URLアドレスをダウンロードしたフォントファイルのローカルリンクに変更するだけです。

もっと簡単にできますよ。

リンク先のファイルをダウンロードするだけです。

http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300

opensans.cssとかいう名前にしてください。

そして、url()のリンクを、フォントファイルのパスに変更するだけです。

そして、例の文字列を置き換える。

<link href='opensans.css' rel='stylesheet' type='text/css'>