paranitips

Never stop learning! がモットーのゆるふわエンジニアブログ

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';
}

参考