📛📛📛📛📛

Firebaseの話題を書く際なので、せっかくだからTofu on Fireの絵文字を使ってみたかった。Macの絵文字入力上は"name badge"、至って普通。

Firebase使いやすいんだけど、まだ浸透しきっていないのか（それともネット上に存在しない情報はみんな知ってる、そもそも初歩の初歩という前提なのか）情報がどうしてもない時がある。

🤔困った🤔

静的サイトをFirebaseに移管したときにCORSの問題でアイコンフォントが表示されない自体に遭遇した。いわゆるTofu問題。

📝Font Notoの由来

ここで話変わってフォント話。
no more tofu「◾︎ 豆腐ゼロ（文字化けゼロ）」をコンセプトに開発されたのがNotoシリーズです。知らない人にいうと「💡」となる話題。

Google Fonts

✅解決策

話を戻そう。最初は不可視ファイルの.htaccessをいれ忘れただけかと思ったが、そうではなかった。.htaccessを追加しても問題は解決しなかった。

さてどこが問題なのか。色々探してみてもよくわからなかったが、結果的に答えは公式サイトにサンプルとして乗っていた

Hosting 動作をカスタマイズする  |  Firebase

firebase.jsonのhostingに以下を追加。

"hosting": {
//"public"とか"ignore"に加えて
   "headers": [
     {
       "source": "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
       "headers": [
         {
           "key": "Access-Control-Allow-Origin",
           "value": "*"
         }
       ]
     }
   ]
}

オチ

Tofu on Fire📛の絵文字を使った理由がわかっていただければ幸いです。

以前、他のプラットフォームでも出会した際のことを思い出しながら書いてみたので、興味のある方はもしよかったら。

CORS対応まとめ - Qiita