HTML CSS

日本語のwebフォントを使ってみよう

2014年12月31日

webフォントを使うと、どのデバイスから見ても自分の意図した通りの見た目にすることができます。
webフォントの導入はそれほど難しくないのでトライしてみましょう。

各デバイスで使えるフォントはバラバラ

通常、フォントはユーザーのPCにインストールされているフォントしか表示できません。
mac, windows, linux, androidなどたくさんのOSがあって、各デバイスごとにインストールされているフォントは異なります。
これだと自分の意図した見た目にするのは難しいです。
フォントはデザインの重要な部分のひとつですから、このような状況ではデザインが完成しない、と愚痴りたくなってしまいます。

こんなときにwebフォントの出番です。
サーバーに置いてあるフォントを読み込んで、PCにインストールされていないフォントでもブラウザ上で表示できるようになります。

webフォントは、google fontsが登場してかなり使いやすくなりましたが、日本語は未対応。
他の方法で日本語のwebフォントを使えるようにしましょう。

まずは日本語フォントをダウンロード

いくつかフォントはありますが、おすすめは「Rounded M+」。
webfont1

こちらからダウンロードして下さい。
※種類がいろいろあります。詳しい違いはこちらを参照してください。

ダウンロードしたら使いたいフォントファイルを一つ選びましょう。
形式は「.ttf」ファイルを選ぶようにしてください。

WOFFファイルの作成

基本的に、ttfファイルだけでほとんどのブラウザに対応するんですが、IEだけが対応していません。
そのため、IE用にWOFFファイルを作成します。

WOFFコンバーターのインストール

こちらからアプリケーションをダウンロードし、インストールしてください。

woffファイルの作成

webfont2

四角で囲んだ部分にttfファイルをドラッグアンドドロップ。
「変換開始」をクリックすると、すぐにwoffファイルが作成されます。

webフォントをCSSで設定

ttfファイルとwoffファイルをサーバーにアップロードしておきます。

CSSに@font-faceを記述

CSSに下記の記述を追加してください。

@font-face{
  font-family: "フォント名;"
  src: url(font/フォント名.ttf) format("truetype");
}

@font-face{
  font-family: "フォント名;"
  src: url(font/フォント名.woff) format("woff");
}

これで設定完了です。
あとは、「font-family : “フォント名”;」を好きな要素に追加するだけです。

みなさんも日本語webフォントを使っておしゃれなウエブサイトを作ってみてください!

お問い合わせやコメント

ウェブサイト制作の依頼やこの投稿へのコメントなど、なんでもいいのでお問い合わせ待っています!ウェブデザインのチューターもしているのでそういったことへの依頼も受け付けています。

送信完了しました。 お問い合わせ確認用メールを上記のメールアドレス宛てに送信しましたのでご確認ください。 24時間以内に返信いたしますのでお待ち下さいませ。
お問い合わせありがとうございました!

送信完了しました。 24時間以内に返信いたしますのでお待ち下さいませ。
お問い合わせありがとうございました!

送信に失敗しました。お手数ですが入力内容をご確認の上、再度送信ボタンをクリックしてください。