MMORPGを通じてリアルに結婚した、私と旦那とうさぎのうかつで愉快な日常です。
03« 123456789101112131415161718192021222324252627282930»05

This Archive : 2017年04月07日

ふぉんとにマニアックなフォントの話 4(完結編)

Webフォント問題、クリアしました~~! ヾ(*>Д<*)ノ゙

ノーコンテニューで決めてやれませんでしたけど、
やっと、やっと、やぁぁぁぁっと、
サブセットフォント適用成功です!!

▶これまでの経緯
1.Webフォントのサブセットフォントを作る
2.FC2ブログのファイルアップロードではフォントファイルは対象外と知る
3.フォントファイル置き場の外部サーバー(無料)なんて無いと諦める
4.GoogleフォントURLのWebファイルをブログに適用
ふぉんとにマニアックなフォントの話

5.改めて無料サーバーを探し、Firebaseに到達
6.Firebaseのホスティングサービスにサブセットフォントをアップ
7.WEBページでWebフォントが反映されない
はしゃぐウサギとその後のフォント

フォントファイルが壊れているのだろうかと怪しんだりもしたのですが、
試しに@font-faceのsrc指定を下記のようにローカル指定で試してみました。
src: url(file:///C:/Users/usapooh/webfonts/NotoSansJP-Light.otf)
すると、ちゃんとWebフォントで表示されたので、ファイル自体は大丈夫そう。

FirebaseへのURLがおかしいのかと怪しんでファイルへのURLをブラウザに貼り付けると、ちゃんとダウンロードしようとするのでURLは問題なし。


色々調べて、下記のサイトに辿りつきました。
SNSボタンやWebフォントが表示されないときのよくある原因と対処法
自サーバーに置いたWebフォントを読み込めない時の対処法


クロスドメインとかいうやつが、原因なのではないか??
それをどうにかするには、.htaccessファイルに記述すればいいのね。うん。

けれど、Firebaseに.htaccessをアップしても何も変わらず。

そもそも、Firebaseって.htaccess対応しているのか???
『Firebase htaccess』とか『Firebase Apache』などとGoogle先生にお伺いを立てるも、英文のサイトばかり出てくる上に、翻訳をかけてもちっとも答えが見つからない。

Access-Control-Allow-Originの値をどうにかしたいんだよ~~!
『Firebase Access-Control-Allow-Origin』と検索してみたところ、
firebase.jsonという設定ファイルがヒット。

あっ! これがFirebaseでの.htaccess(のようなもの)なんじゃないの?!


ってなわけで、firebase.jsonの "hosting": { } 内に、下記コードをカキカキ。
"headers": [ {
  "source" : "**/*.@(eot|otf|ttf|ttc|woff|woff2|font.css)",
  "headers" : [ {
    "key" : "Access-Control-Allow-Origin",
    "value" : "*"
  } ]
}

これをデプロイして確認すると、
沈黙していたサブセットフォントが顕現!!!

オォォーーー!! w(゚ロ゚;w(゚ロ゚)w;゚ロ゚)w オォォーーー!!

全私が泣きましたよ。長かったぁ~~~~っっ 。゚(PД`q*)゚。




実は、Firebaseでホスティングできるようになるまでで一度挫折していました。

FirebaseでWebサイトを無料でサクッと公開してみる』でサクッと紹介されている内容を参考にして挑んだのですが、
私はちっともサクッとできなかったのですよ。

Firebaseでホスティングする手順
01.Firebaseに登録(Googleアカウントがあれば無問題)

02.FirebaseにWebサイト用のプロジェクトを新規作成

03.Node.js / npmをインストールする

04.コマンド『npm install -g firebase-tools』で(何かを)インストール

05.コマンド『firebase login』でFireBaseにブラウザログイン

06.コマンド『firebase init』でプロジェクトを初期化開始

07.コマンド画面に選択肢(Database/Hosting)がでるので
"Hosting"を選択してEnter

08.コマンド画面にプロジェクト選択肢がでるので
02で作ったプロジェクトを選択してEnter

09.他にも色々コマンド画面で聞いてくるのをとりあえず全部Enter!(恐怖)

10.パソコンにできたpublicフォルダの中身を修正(index.htmlなど)

11.コマンド『firebase deploy』でFirebaseにWebページを適用

04.『npm install -g firebase-tools』でつまづきました。
他のサイトでは、インストールしたNode.jsでコマンドを入れるみたいな表現に見えたのに、全く反応せず。
上記のサクッと紹介されたページでは特に記載はないですし。

検索したら、英語のページばかりでYou Tubeの動画がヒット。
それを観たらコマンドプロントから実行するという罠だったという……


今までホームページのファイルアップロードといえばFTPしかやってこなかったので、めっちゃ戸惑いました。
しかも、デプロイした後のFirebaseの管理画面、ファイルの一覧とか確認出来ないし (゚Д゚;)
ファイル数しか見えないのですか、実は出来るんですかね??

私のような素人が手を出すには、Firebaseはちょっとハードルが高かったですけど、飛び越えずにパタパタ倒しながらもゴールは出来たって気分です (≧∀≦;)


小文字のl(L)の形が気に入らないとか言っていた問題も、Droid Sansで解決しましたし。
Noto Sansを試したら、顔文字でよく使う「 ´ 」「 ` 」が字が詰まっておかしくなってしまいました (´・ω・`)?)

は~ 良かった。

めでたし、めでたし(?!)
スポンサーサイト
COMMENT : 0
TrackBack : 0
CATEGORY : 未分類 | THEME : webサイト作成 | GENRE : コンピュータ |

プロフィール

usapooh
双方初彼氏彼女で2年と7ヵ月交際
2009年3月結婚。
2009年7月お家を購入!
ベビなし共働き中。
2013年1月うさぎのあんこ登場。

2014年12月旦那が不倫。
2015年5月別居開始。
2015年12月末、再構築へ。

● ぷちオタ家 ●
:usapooh
AGE:38歳
TYPE:典型的なO型
JOB:会社員(データ関連)

旦那:bayopooh
AGE:2年355日年下
TYPE:A型より(?)のAB型
JOB:フリーランス(SE)

あんこ(うさぎ)
AGE:2012年9月生
TYPE:ライオン混ドワーフ
JOB:自宅警備員


最新のコメント


カテゴリ


タグクラウドとサーチ


リンク


月別アーカイブ

04  03  02  01  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05 


お小遣い稼ぎ中

☆御用達アンケートサイト☆
めちゃオススメです!
マクロミルへ登録

☆御用達ポイントサイト☆
ダブルポイントでゲット!
ポイントサイト「Point Income」


Plus