スマホでotf形式のフォントが効かない時｜ローカルフォントをスマホとPCで適切に反映

記事LPなどを作ってる人で、記事のCTAや重要な部分のフォントを変えたい人は多いはず。

並のフォントじゃなくて、誰か他の人が作った尖ったフォントを使いたい時は多いはず。

でも、そのままフォントを指定して、当たり前ですけど実際にウェブサイトに表示させてもフォントは表示されません。

さらに、フォントファイルの形式を正しく選ばないとWEBのChromeでは表示されるのに、スマホ（Android）のChromeではフォントが表示されない・・・

みたいなことも発生します。この記事は、誰かが作ったサードパーティ製のフォントをダウンロードして、ディレクトリに収め、

CSSから相対パスでフォントの在処を指定して、パソコンでもスマホでも正しくサーバーにファイルをアップしたときに、

LPにフォントが適応される方法を書きます。（高速で表示される方法も書きます）

そこまで長く丁寧に書いてるわけじゃないけど、とても役に立つ記事だと思うのでぜひ最後まで読んでみてね。

パスの指定方法

こんな感じで同じディレクトリに入ってる設定で。

こんな感じで書けばOK

/* Webフォントを定義 */
@font-face {
font-family: ‘myfont’; /* フォント名 */
/* フォーマットごとにパスを指定 */
src: url(‘./鉄瓶ゴシック.woff’) format(‘woff’);
}

.large-text {
font-size: 35px;
font-weight: bold;
font-family:myfont !important;
}

これで鉄瓶ゴシックというフォントが使えます。

サーバーにアップしても相対パスで正しく表示されるはず。