『webフォント』で好きなフォントを表示させよう

web

この記事を読むと
以下のような悩み、疑問を解決できます。

  • 好みのフォントを見つけたが『Windows』でしか表示されない
  • だから『Mac』で表示されるフォントを探してみたが今度は『Windows』に対応していないじゃないか
  • 『Googleフォント』なら解決できると思ったが日本語フォントは少ないなぁ
  • いっそのこと「画像にしちゃおう」と思ったがSEOで弱くなるかぁ
  • (好きなフォントを)全OS、全ブラウザに対応させる方法ないのかよ……

結論:webフォントを使えば解決です!

この記事では、
webフォントの使い方
(設定、設置、変換など)
を詳しく解説しています。

コピペで使えるコード
掲載しているので、
この記事を見ながら進めていけば、
だれでも簡単に
webフォントを使えるようになります。

コードは、ご自由にお持ち帰りください。

webフォントは、とても便利。

webフォントは、とても便利。

webフォントとは一体なんなのか、
まずは全体の流れを簡潔に説明します。

  1. 閲覧者がサイトへ行く
  2. サイトが読み込まれる
  3. と同時にサーバーにあるフォントが読み込まれる

まずは、なんとなくのイメージでOKです。
実際にやってみると、
後から理解は深まります!

それでは、さっそく、
webフォントを一緒に使ってみましょう。
とても簡単ですので、安心してください。

webフォントをダウンロードする。

フォントをダウンロードする。

まずは、
好きなフォントを
ダウンロードしてください。

もし、
ダウンロード時に
ファイル形式を選べるならば
『woff』
をダウンロードしてください。

『woff』がない場合は、
どれでも構いません。

練習用として、これからフォントを
ダウンロードされるかたは、
以下のような「フリーフォント」
のサイトが、まずは、おすすめです。

フリーフォントのサイトは、こちら。

無料なので、
もし宜しければお試しください。

フォントをお持ちの方は、そのまま
この記事を読み進めてください。

webフォントのデータ形式を変換する。

webフォントのデータ形式を変換する。

次にダウンロードしたフォントの
ファイル形式を変換してください。

前述にもあったとおり、
『.woff』という形式に変換しましょう。

細かい説明は、ここでは割愛しますが、
とにかく『.woff』にしないと、
また「一部でしか表示されない」
ということが起こってしまいます。

比較的、多くの環境に対応(互換)
しているのが『.woff』です。

それでは———
さっそく変換していきましょう。

『WOFFコンバータ』でwebフォントを変換する。

『WOFFコンバータ』
という無料ソフトを使いましょう。

『WOFFコンバータ』を使えば、誰でも
簡単にwebフォントを変換できます。

それでは———
手順を解説していきます。

まずは、
以下のリンク
(『WOFFコンバータ』のサイト)
へ行きましょう。

『WOFFコンバータ』は、こちら。

すると———
以下のようなページへ飛んでゆきます。

『WOFFコンバータ』のサイト。
『WOFFコンバータ』のサイト。

ひたすら、下までスクロールしましょう。
ず~~~~っと下まで行きましょう。
ページの1番下まで行くと、
ファイルが置いてあります。

『Windows版』と、
『Mac版』があります。

『WOFFコンバータ』のダウンロードページ。
『WOFFコンバータ』のダウンロードページ。

ダウンロード&インストール

自分の環境に合うものを選択し、
ダブルクリックすると、
ダウンロードが始まります。

ダウンロードしたものを開くと、
以下のような、
セットアップ画面が表示されます。

『WOFFコンバータ』のセットアップ画面。
『WOFFコンバータ』のセットアップ画面。

色々と書いてありますが、ひたすら
[次へ]をクリックしていけば、
セットアップ(インストール)が
問題なく完了します。

※途中でインストール先を
選ぶ項目がありますが
これは自由に決めて大丈夫です。

インストールが終わり———
アプリソフトを起動すると
以下のような画面が現れます。

『WOFFコンバータ』のアプリ画面。
『WOFFコンバータ』のアプリ画面。

[変換前ファイル(S):]
という項目の「参照(R)…」
をクリックして、
webフォントのファイル
選択してください。

今回は(この画像では)、
『.otf』というファイル形式の
webフォントデータを選択しました。

選択後———
[変換開始]をクリックしましょう。
すると、
以下のポップアップが出現します。

『WOFFコンバータ』でwebフォントを変換した。
『WOFFコンバータ』でwebフォントを変換した。

あとは[OK]を押せば、OKです。

変換されたwebフォント(.woff)は、
変換前のデータがあったフォルダの中に
しれっと潜んでいるので
ちゃんと見つけてあげましょう。

以上で、
『.woff』への変換作業は、終了です。

webフォントをサーバーにアップする。

webフォントをサーバーにアップする。

サーバーに「font」や「fonts」など
なんでもいいのでフォント専用の
フォルダ
を作っておきましょう。

そのフォルダに先ほど作った
webフォント(woff)を
アップしておきましょう。

※「フォント専用フォルダを作る」
と言いましたが、実際は、
ローカル環境で制作するため
ローカルフォルダ内に
フォント専用フォルダを作って、
webフォントを収納しておきましょう。

例えば———
以下のような階層になります。

「LP」
↓
「font」
↓
「~~.woff」

サイトでwebフォントを読み込む方法

サイトでwebフォントを読み込む方法

いよいよ、ここからは、
コーディングです。

読み込むためには、
コーディングが必要だからです。

とは言っても簡単ですので、
一緒にやっていきましょう。

今回はCSSを書いていきます。
まずは、そのままマネしてください。
以下の画像を見てください。

webフォントを読み込むコード。
webフォントを読み込むコード。

コピペしたい場合は以下からどうぞ。

@font-face{
font-family:"なんでもいい";
src:url("font/ファイル名.woff")format("woff");
}

このコードを簡潔に説明しますと、

「@font-face」で定義した、
「font-family」を使うと
「src」で書いた場所(フォルダ)にある
「なんちゃら.woff」を読み込みます。

みたいな感じです。
まずは、なんとなくの理解でOKです。

これで、
webフォントを読み込むための
設定は、終わりです。

あとは、
使いたいところ
(読み込みたいところ)で
「font-family:”なんでもいい”;」
を書いてください。

そうすれば、
webフォントを
読み込むことができます。

これで、あなたも
webフォントをマスターできました。
おめでとうございます。

もし、わからなかったり
上手くいかない場合は、
お問い合わせフォームへ連絡ください。

それでは、しばしの別れ。

広告