Laravelで「ふい字」という可愛い日本語フォントを使ってみたのだが、表示させるのに思ったよりてこずったので、同じように困っている人がいたら参考にして欲しい。
「ふい字」ダウンロード
↓ダウンロードはこちらから
https://hp.vector.co.jp/authors/VA039499/
僕は、軽量版「ふい字」をダウンロードした。
ダウンロードはこちらから、をクリックして誘導に従うとすぐにダウンロードできる。
注意！HuiFont109.lzhは圧縮ファイルである
知っている人にとっては何を当たり前のことを！と思うかもしれないが、僕は知らなかった。
ZIPファイルと同じようにLZHも圧縮ファイルなのだ。
そうとは知らない僕は、Laravelのpublicディレクトリ配下に、fontsディレクトリを作り、そこにHuiFont109.lzhを配置した。
↑ダメな例
圧縮ファイルのままではフォントは読み込まれないので解凍しなければならない。
MacではZIPファイルは、OS Xの標準機能で解凍出来るが、LZHは標準機能では解凍出来ないので、フリーソフトを使うことになる。
LZH形式ファイルを「The Unarchiver」で解凍
AppStoreで「The Unarchiver」をインストールしたら、LZHファイルを解凍出来るようになる。
HuiFont109.ttfをpublic/fonts配下に置く
HuiFont109.lzhを解凍すると、HuiFont109.ttfというファイルがあると思うので、これをLaravelのpublic配下に作ったfontsディレクトリに置く。
↑正しい例
CSSでパスの設定などをする
@font-faceのパスを間違えやすいので要注意！！！
ローカル環境で開発しているのであれば、
localhost:○○/fonts/HuiFont109.ttfとなるようにパスを設定する。
ちなみに、フォント名は自由に決めれるので、下のようにフォント名を「Sample」にしても構わない。
分かりやすい名前にしておくに越したことはないが。
重要！.gitattributesファイルに設定を追加する
こちらのサイトによると
Webフォントは、バイナリーファイルで、gitが改行コードのCRLFをLFに自動変換する処理において、バイナリー内のCRLFまでLFに書き換えてしまうことで、バイナリーが壊れてしまっていた
といったことが、起こっている。
.gitattributesファイルに次の記述を付け加えると、上のようなgitによるバイナリーファイルの破損を避けることが出来る。
*.otf binary
*.eot binary
*.svg binary
*.ttf binary
*.woff binary
はい！！！
これできっとあなたのページにも可愛い可愛い「ふい字」の文字が表示されているはずだ。
参照
