Firebase経由のホスティング
Firebaseの使い方とインストールについては、下記から参照
bloggerでSyntaxHighlighterをFirebase経由のホスティングする
Firebaseにwebフォントを設置すると？
- 表示されない！
まず、Firebaseにwebフォント設置。別サーバーからの読み込みがされずフォントが表示されない。
- Firebase内にhtmlファイルを設置する。表示された！
Firebase内にwebフォントを設置。同じくFirebase内にhtmlを設置。表示される。
- ローカルファイル内では？表示される！
ローカルファイル内にwebフォントを設置。同じくローカルファイル内にhtmlを設置。表示される。
と、Firebase内にwebフォントを設置 ＜＜（読込）＜＜ 別サーバーからの読み込み がされない状態となった。
なぜ、Firebase内設置のwebフォントが読み込めないのか？
google先生に問合せをかけると、アクセス制限がかかっているため読込できない。
通常のレンタルサーバーであれば、.htaccessにAccess-Control-Allow-Originの設定をすれば良いのだがFirebaseには.htaccessがない！
では、どのようにするのか？
FirebaseでAccess-Control-Allow-Originを設定する方法
まず、ローカルファイル内にfirebase.jsonというファイルがあるので検索する。
見つかったら、バックアップをとる。
firebase.jsonを開いて下記のコードに書き換える。
{
"hosting": {
"public": "public" ,
"headers": [ {
"source" : "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
"headers" : [ {
"key" : "Access-Control-Allow-Origin",
"value" : "*"
} ]
} ]
}
}
さいごにfirebase deployを実行してファイルをアップロードする。
0 件のコメント :
コメントを投稿