Google Fontsを導入しておしゃれにしよう！ホームページを作っているともっといい感じのWebフォントで表示したいと思うことがあると思います。Webフォントを導入しない場合、WEBサイトを見ている人のパソコンやスマートフォンなのどにインストールされているものが表示されます。
Webフォントは日本でもたくさんの方が開発しているのですが、自分のサーバー（レンタルサーバーなど）にインストールすれば使うことができます。
しかし、日本語のWebフォントはファイルサイズがとても大きいため、配信方法に気を使う必要があります。
性能のいいサーバーを使ったり、CDNを利用し配信速度を速くする必要があるります。
富豪的にモリサワフォントなどと契約すれば様々なWebフォントを使えますが、料金は高いです。
Google Fontsもしかりです。かなり重たいのまだ実用的ではありません。
残念ながら日本語フォントを使う場合はお金がかかるのが現実です。
今回ご紹介するGooglefontsは欧文フォントと日本語のフォントになります。まだまだ数は少ない日本語フォントですが、無料で利用できるので試して見るといいでしょう。また欧文フォントも使い方いどころによってはとても使えます。
Google Fonts公式サイト
Google Fonts日本語早期アクセス
公式サイトの使い方
現在欧文フォントと、日本語早期アクセスという試用版がリリースされています。両方のサイトの使い方を説明します。
まずは欧文フォントの公式サイトにアクセスして見ましょう。
欧文フォント
公式サイトにアクセスするとたくさんのフォントが出てきますので、使いたいものが見つかったら、下のアイコン部分をクリックします。
次のページでフォントのweightを選択します。
使用するフォントを選択します。font-familyに追加や削除がされますので、使いたいものだけ入れましょう。
フォントの設置方法を選択します。ここでは一番簡単な「standard」を選びましょう。
日本語フォント
現在、試用版となりますが、部分的に利用する分にはいいでしょう。
設定方法
選択しましたら、<head>タグ内にコードをコピペして貼付けます。グーグルフォンとのサイトから指定したフォントを呼び出します。下は例です。
次に、スタイルシートを開き、呼び出したい部分にフォントファミリーを指定して完了です。
使いたい場所に、コードを貼付けます。
下の例はh1にフォントを適用した場合です。
h1 {
font-family: 'Oswald', sans-serif;
}
Goolgle fontsをSSL対応にする方法
SSL対応のサイトの場合。デフォルトでは対応していませんので、ほんの少しコードを修正します。
http://をhttps://に変更すれば反映されます。
//http://をhttps://に変更
Googlefontsをつかえば、とても簡単にイメージを変える事ができるので、タイトルが英語の部分などに利用してみてはいかがでしょうか。
いづれは日本語にも対応して欲しいものですね。
