(cache) はてなブログで独自のWEBフォントを利用する方法

昨日書いた記事
www.fair-skinned-monster.com
のブクマに

PV激減でブログ書く気がしないあなたに朗報。GRCでブログを書くモチベーションを上げる方法を伝授。 - 攻めは飛車角銀桂守りは金銀三枚
人気キーワードなら勝てないしニッチなら人が来ないしジレンマですよね/黒板いいね
2017/02/23 23:10

b.hatena.ne.jp
と「黒板いいね」褒められたので調子に乗って今日はその「黒板」の中を手書き風フォントにしてました。

実はこの「黒板風CSS」はどなたかがされてて「おお、かっこいい」ということで~~勝手に~~オマージュして使わせて頂きました。
リンクを貼ろうと思ったのですが、元が見つかりませんでした。
作者の方すみません、お許しください。

そのままではなんなので「ここがポイント！！」なんて付けたりしてます。

で、今日はそのフォントもできればチョーク風に、と思ってフォントをさがしたのですが、なかなか漢字が表示できて無料で自由に使えるフォントなかったのです。
今回は
tanukifont.com
を利用させていただきました。

フォントをダウンロードする。
フォントの形式を変換する。
フォントをサーバにアップロードする。
CSSに反映する。
クロスドメイン対応をごにょごにょする。

では早速始めましょう。

まずフォントをダウンロードします。
今回ダウンロードした「たぬき油性マジック」は「ttf」形式のフォントなので、このままでも使えるのですが、InternetExploreでは反映されませんでした。

「WOFFコンバーター」というソフトを使って形式を「WOFF」「WOFF2」「EOT」という形式に変換して使います。
（ツールの使い方は簡単で「tff」ファイルを選択して「EOTを作る」にチェックを入れて変換するだけなので省略。）

できたフォントファイルをサーバーにアップします・・・そう、サーバーが必要です。
はてなブログはファイル管理できないのでどうしても他のサーバーにアップロードする必要があります。

この際お安いサーバー借りましょう。

ロリポップ！
さくらのレンタルサーバ

はい、借りましたか？

あ、独自ドメインも取っておいた方がいいかな。お任せします。

お名前.com

では次です。FTPツールでサーバーに適当なフォルダー作成してできたフォントファイルごっそりアップロードしましょう。

できましたか？

それではCSSに反映します。
CSSに以下の文を追加します。

@font-face {
    font-family: 'tanuki-pen-font';   /*この名前はなんでもいい。好きにつけて*/
    src:url("http://あんたのドメイン名/TanukiMagic.woff2") format("woff2"),
        url("http://あんたのドメイン名/TanukiMagic.eot?#iefix") format("embedded-opentype"),
        url("http://あんたのドメイン名/TanukiMagic.woff") format("woff"),
        url("http://あんたのドメイン名/TanukiMagic.ttf") format("truetype");
}

あとは実際に黒板CSSを作ってフォントを利用するだけです。

.blackboard{
    font-family: 'tanuki-pen-font';   /*付けたフォントの名前を指定*/
    padding: 1em;
    color: #ffffff;
    background-color: #006600;
    box-shadow: 2px 2px 2px #000000, 2px 2px 2px #000000 inset;
    border: 10px solid #996600;
    font-size: 18px;
}
.blackboard::before {
  font-family: 'tanuki-pen-font';  /*付けたフォントの名前を指定*/
  top: -12px;
  left: 10px;
  padding: 0 10px 0 13px;
  content: "ここがポイント！！";
  background-color: #ff80bf;
  border-radius: 10px;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  line-height: 20px;
}

でテスト表示・・・で反映されず。

しばり原因調査するとどうやら「クロスドメイン問題」の模様。

Webサービス（Webアプリケーション）などにおいて一つの機能が複数のドメインに接続すること。ネットワーク上に散在する複数のリソースにアクセスするために行われる。複数ドメインにまたがってリクエストを発信することをクロスドメインリクエストという。技術によってはクロスドメインリクエストが制限されている場合もある。

-クロスドメインとは - 日本語表現辞典 Weblio辞書より引用

はい、これです。

う〜ん、困った。でもこんな時はGoogle先生に聞けば・・・ということで情報ありました。
どうやら「.htaccess」ファイルに「クロスドメイン許しちゃうよ」みたいな設定ができると。

Header set Access-Control-Allow-Origin: "*"

この１行を追加すると、あ〜ら不思議。クロスドメイン問題通り越してちゃんとフォントが読めるようになった。
（実際は「*」はどんなURLからでもという意味らしいので「自分のはてなブログのトップURL」を設定してます。）
注意事項としては「フォントをアップロードしたフォルダーに「.htaccess」作ること。

これで見えてるでしょ？新しいフォント。