記事の詳細

Webフォントってご存知ですか?

スタイルシート(CSS)でフォントを指定するだけで、ユーザーのパソコンにインストールされていないフォントでも表示することができるようになるというスグレモノです。

フォントがインストールされていなくて、制作者が意図した見え方になっていないというケースがこれまで良くありましたが、WEBフォントを使えばこれらの問題も解決できます。

今回はWEBフォントをものすごく簡単に使う方法を紹介します!

とにかく簡単に使えるGoogle Web Font

Google Web Fontを今回は使います。

これはGoogleが提供してくれているWEBフォントでして、とても簡単に使用することができます。

Google Webフォント

フォントの数はなんと!

約700種類ものフォントが提供されています!!

わずか4ステップで使えます!さっそく使ってみましょう!

使いたいと思ったフォントが見つかったら、下図の赤枠のアイコン「Quick-use」を押します。

Quick useを押す

Step1:フォントの太さを選びます

使用するフォントの太さをチェックボックスで選択します(複数選択可)

20150620_font_04

Step2:サブセットを選びます

サブセットの種類があるものに関しては、こちらも選択します(複数選択可)

20150620_font_05

Step3:CSSをコピー&ペーストします

@importのタブをクリックしてください。

20150620_font_06

そしてCSSファイルに以下のように書きます。

CSSのファイル名はstyle.cssとして、Step4のHTMLファイルと同じディレクトリに置いておきます。

Step4:HTMLファイルでCSSを読み込みます

上記の記述は<head>から</head>の中に書いておけばOKです。

これでHTMLファイルを再読み込みすると・・、変わりましたか??

HTMLファイル内のフォントが指定したフォントに変わったと思います。

WEBフォントをドンドン活用しましょう!

Google Webフォントなら今回説明したように本当に簡単に誰でも利用することができます。

英字フォントは種類も豊富で無料版が多く提供されているのですが、和文フォントはちゃんとしたものは有料ばかりなのが残念なところです。。。

今後さらにWEBフォントは活躍の場が増えそうです!

簡単に使えるので試してみましょう!

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。


ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

相模原のお店やサービスをどんどん紹介!

行ってみよう相模原 相模原市のお店限定

飲食店

ページ上部へ戻る