GoogleWEBフォントを外部スタイルシートから読み込む方法

SPONSORLINK

Googleが提供している無料のWEBフォント、「Google Fonts」。画像を使わずに様々なデザインのWEBフォントが無料で利用できるようになるのですが、スタイルシートから読み込めるようにする方法をご紹介。

GoogleFonts

Googleフォントってなに?っという方は下記を参照して下さい。

Googleフォントの使い方まとめ

2015.01.26

スタイルシートからGoogleFontsを読み込む

といっても使い方はとっても簡単で、現在使用している外部CSSに下記のように読み込むだけ。とっても簡単です。

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

基本的には<head>内に書き込むことが多いのですが、<head>内をスッキリさせたり、ソースが簡単に見れないようにすることもできるので、スタイルシートに記述して使う方法も覚えておいてもいいのではないでしょうか?

ちなみに僕はいつも上の表記の仕方ではなく「http:」を外して記述しています。

@import url(//fonts.googleapis.com/css?family=Lato:300,400,700);

意味はどちらも同じなのですが、問い合わせフォームなどでSSL(サイトセキュリティ)を導入する際に下記の書き方の方がトラブルが少なくてすみます。

コードも多少短くなりますしね。

ちょっとしたことですが、同じ意味なのであればトラブルが少なく汎用的なものを選ぼうというだけの話しです。

まとめ

今回の記事は短いですが以上です。Googlefontsは今日現在(2015/02/26)で671種類あり選ぶのも大変ですが、好みのフォントもきっと見つかるはずです。

とっても簡単にデザインにアクセントを加える事ができるのでオススメですよ。

ただし日本語のフォントは今のところないので英数字に限られてしまいますが…英語圏の方がうらやましい……

当サイトでもPC版のグローバルナビや見出しの一部で取り入れています。

スクリーンショット_2015-02-26_11_06_41 スクリーンショット_2015-02-26_11_07_21

テキストなので変更したい場合も文字を書き換えるだけなので、簡単です。

では今日はこの辺で!

Googleフォントの使い方まとめ

2015.01.26
SPONSORLINK

\このサイトでつかってるのはこれ/

インパクトのあるアニメーション
WPテーマ「ハミングバード」

インパクトのあるアニメーションでブログを演出します。

新作!究極のモバイルファースト
WPテーマ「ストーク」

「新しいスマホビュー時代をつくろう」というのをコンセプトに、スマホでの見やすさ、操作しやすさにとことんこだわりました。

誰が使っても美しいデザイン
WPテーマ「アルバトロス」

シンプルかつ正統派のブログテーマです。

ABOUTこの記事をかいた人

香川県(うどん県)にてフリーランスWEBデザイナー/ディレクターとして活動。小規模なWEBサイト制作を得意とし、コンセプト設計からデザイン、コーディング、撮影にいたるまでのすべてをこなします。地方の良さを全国に広めていくお手伝いをしていきたいと思っています。