webフォントの使い方といくつかTips

webフォント関連について纏めてみました。

webフォントの設定方法

webフォントはcssで単に適用することができます。
@font-faceでフォント名と対象フォントファイルへのパスを指定し、font-familyに指定するだけです。
以下、ソースです。

body {
  font-family: 'LogoTypeGothic', 'sans-serif';  // @font-faceで指定した文字列を指定
}

@font-face {
  font-family: 'LogoTypeGothic'; // font-familyで指定する名称
  src: url('/xxx/07LogoTypeGothic7.ttf'); // フォントファイルへのパス
}

※フォントを使用する際は、ライセンスにご注意
webサイトでの利用は、クライアントへフォントをダウンロードすることになるので、フォントの再配布に当たります。

Google Fontsの利用

Google Fontsで公開されているフォントなら、フォントファイルなしで直ぐに適用することができます。

1. 使用したいフォントを選んで、右下のボタン群の真ん中を押します。

2. 色々指定をした後、ページ中断以降にあるタグとcssを設定します。

↓観づらいのでコピペ（選択内容によって毎回違うのでサイトからコピッてね）

• head内に以下のタグを追加

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>

• cssで適用したい要素にfont-familyを追加指定

font-family: 'Open Sans Condensed', 'sans-serif';

これで完了です。

和文フォントのモバイルでの利用

和文を含んだフォントファイルはメガを超えるサイズのものが一般的です。
モバイルでの利用を想定すると、ちょっとサイズが気になることも…
そんな場合には、ひらがな・カタカナのみ適用し、漢字はシステムフォントという選択肢もあります。
（うまく合うフォントは限られますが）

方法はごく単純で、漢字を含まないフォントファイルを用意するだけです。
指定されたフォントの中に、該当の文字がなければ、漢字はシステムフォントが適用されます。
で、漢字を含まないフォントファイルの作り方は、以下のサイトを参考にさせて頂きました。

文字を制限した軽量な日本語 Web フォントを作成する方法 - てっく煮ブログ

※フォントから漢字を抜く行為はフォントの改変＋再配布となるので、ライセンスにご注意