読者です 読者をやめる 読者になる 読者になる

49hack

見習いエンジニアが魔法使いになるまで

iPhoneのWebViewでカスタムフォントを使う

アプリ全体のデザインを崩さないためにも、アプリ内のWebViewでも積極的にカスタムフォントを使いましょう。 使用したいカスタムフォントがアプリ内に入っている場合とそうでない場合で方法が若干異なります。

(カスタムフォントがmplus-1c-medium.ttfの場合を考えます)

アプリ内にカスタムフォントが入っていない場合

この場合は通常のWebと同じく、@font-faceでフォントを読み込んで上げればOK。

サーバに直接フォントを置いて、そのパスを指定したほうが高速です。

@font-face {
  font-family: 'mplus-1c-medium';
/*  url('http://mplus-webfonts.sourceforge.jp/mplus-1c-regular.ttf') format('truetype');  */
  url('/font/mplus-1c-medium.ttf') format('truetype'); /* フォントをサーバに置いてパス指定のほうが良い */
}
body {
  font-family: 'mplus-1c-medium';
}

アプリ内にカスタムフォントが入っている場合

カスタムフォントのフォントファミリー名を直接記述するだけで使えます。

※@font-faceが不要です

body {
  font-family: 'mplus-1c-medium';
}

参考