記事の詳細

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フォントは活躍の場が増えそうです!

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

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

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

The following two tabs change content below.
三宅 崇之

三宅 崇之

取締役/ストックマーケティング事業部長インクループ株式会社
研究大好き。WEBサイトを通し集積したデータを分析することで、現状を正確に把握し、次の一手を生み出すことを目的としたマーケティングを実行し、より良い企画・計画を提案することを得意としています。

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

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

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

特集

エクセルトラブルと解決策のまとめ アクセス数を増加させるための方法まとめ 初心者向けWordPressの設定方法まとめ

AD

お知らせ

平成28年度補正予算 小規模事業者持続化補助金
ページ上部へ戻る