【CSS】お試しならコーディング不要! Google Fontsで気軽にWebフォントを試す

こんにちは、Webフォントってなかなか使いにくいですよね。
日本語のWebフォントは対応しなければならない文字の種類(漢字・ひらがな・カタカナなど)が多く、表示されるまでのタイムラグが問題になったりしますね。

レスポンシブデザインに対応できたり、画像を使わずにデザイン的に表現できるなどのメリットがあるんですが、残念です。

「欧文フォント」の活用が実用的

Webフォントサービス自体の技術向上、またネットワークインフラの向上などに期待しつつ、「欧文フォント」を使っていきましょう!
欧文フォントは、アルファベットと数字だけ(一部記号)なのでとても軽く、非常に気軽に使えます。

試したいけど、フォントの切り替えがめんどくさい

Webフォントだからこそ、「どれにしようかな〜」のときの面倒がでてきそうです。

もちろんデザインの段階からWebフォントで使うものを想定して設計することがベストですが、もっと気軽に変更プレビューができたらいいと思いますよね。

Chrome拡張「Google Font Previewer for Fhrome」

Google Font Previewer for Chrome – Chrome ウェブストア

これは便利です。

Screen-Shot-2015-01-16-at-02.08.00
入れました。

※ クリックしても表示が遅いです。少し待てば表示されます。

Before

Screen-Shot-2015-01-16-at-02.08.42
通常通りです。游ゴシックで表示されてます。

Setting

Screen-Shot-2015-01-16-at-02.15.57

Carmeというやつを選択してみました。

After

Screen-Shot-2015-01-16-at-02.16.09

見事にアルファベットと数字が変化していますね!

※ 日本語まで変化しているのは、お試しで強制的にfont-family: 'Carme', sans-serif;となってsans-serifがかかってしまっているためです。

また、以下のように埋め込み用のコードも出してくれます。

<link href="//fonts.googleapis.com/css?family=Carme&subset=latin" rel="stylesheet" type="text/css">
<style>
* {
    font-family: 'Carme', sans-serif;
}
</style>

実際にはfont-familyを設定している自身のCSSの先頭に今回の場合であればCarmeを足すだけでOKです。そうすることで、アルファベットや数字はWebフォントとなり、日本語文字などは2番目以降のフォントが適用されることとなります。

まとめ

注意したいのは、異なるフォントが交じることによって縦横のバランスがずれる可能性があり、相性の悪いフォントもあるのでご注意ください!

お気軽にできるのでオススメですよ!

フォローして続編をチェック

@universionsをフォロー