【大阪 / 横浜 / 徳島】インフラ / サーバーサイドエンジニア募集中！

【導入実績 500社以上】AWS 構築・運用保守・監視サービス

【CentOS 後継】AlmaLinux OS サーバー構築・移行サービス

【WordPress 専用】クラウドサーバー『ウェブスピード』

自作WEBサイトでお気に入りのフォントを使う！

2016.02.29

Webシステム開発

目次 [非表示]

0.1 用意するもの

1 Windows上のフォントファイルを探す
2 Woffコンバータでフォントを変換してみる
- 2.1 作ったフォントをCSSで読み込む
- 2.2 まとめ

開発チームの山田です。

ここ数年でCSSフレームワークも充実して、僕みたいにデザインの知識がなくてもそれっぽいWEBサイトを作れるようになりました。
でも、使いこなせないとなんだか他のサイトと似たり寄ったりなデザインになりがち。

今回は少し個性を出すために、Windowsで使っているお気に入りのフォントを自作のWEBサイトで使用する方法について紹介します！

※使用するフォントのライセンスは必ず確認してください！※

用意するもの

まずはWindows用のフォントをWEB用のフォントに変換するために、Woffコンバータというフリーソフトをインストールします。
以下のサイトからダウンロードし、「woffconv230.msi」を実行してください。
選択する項目は多くありませんので、利用規約に同意してインストール先を選択すればOKです。

窓の社 Woffコンバータ (外部リンク)

Windows上のフォントファイルを探す

Windows上にインストールしたフリーフォントを探します。
フォントファイルは「コントロールパネルデスクトップのカスタマイズフォント」にあります。(windows 10の場合)
このままエクスプローラーのアドレスバーに打ち込めばOKです！

エクスプローラーのアドレスバーに上記パスを入力すればフォントファイルの場所に移動できるので、
今回はこの中から目的のフォントを選択してみましょう。

Woffコンバータでフォントを変換してみる

フォントファイルが見つかったら、いよいよWEB用のフォントファイル「woff」に変換します。
先ほどインストールした「woffコンバーター」を起動して、
「変換前ファイル」のテキストボックスに先ほど選択したフォントファイルをドラッグアンドドロップしてみましょう。

変換後のファイルは何も入力しなくても変換前のファイルを元に自動でファイル名を決めてくれます。
また、出力先のフォルダだけ設定してもOKです。

あとは「EOTファイルを作成する」にチェックを入れます。
その他のチェックは用途に合わせて適宜選択してください。

ここまでできたら「変換開始」をクリックします！

「フォントの指定」というダイアログが出てくると思いますので目的に合ったものを選択します。

無題2
ファイル生成に成功すると「正常に変換しました」と表示されます！

作ったフォントをCSSで読み込む

最後に作成したフォントファイルをCSSで読み込んで、実際にWEBサイトへ反映してみましょう。

まずは先ほど作成した「〇〇.woff」「〇〇.eot」「〇〇.ttf」の3つのファイルをサーバー上にアップロードします。
※「〇〇」はフォント作成の時に指定した名前or自動生成した場合は元のフォント名です。

アップロードできたら下記CSSにてフォントファイルを読み込ませてください。

@font-face {
  font-family: "myFont";w
  src: url("[アップロード先のパス]/〇〇.woff") format('woff'),
       url("[アップロード先のパス]/〇〇.eot") format('eot'),
       url("[アップロード先のパス]/〇〇.ttf")  format('truetype');
}
.myFont{font-family: "myFont";}