はてなブログでgoogleドライブ上においたWebフォントを使用する方法あるいはいかにしてcssを読み込むか

意外に情報がなかったので書いておこう。おかげさまでえらい目にあいました。
もともとはhotcomとかはてなダイアリーでファイルアップロードして使っていたのだが、昨日あたりから急に読み込めなくなった。せめてはてなダイアリーでファイルアップロードしている文くらいは読み込んで欲しいのだが、もともと読み込みがクソ遅かったしな…というわけでgoogleドライブからの読み込みにトライする。

1. webフォントに変換する

otfでも読み込める（というかGoogle Web Fontsなんかはotf形式で提供している（いた？））はずだが、一応ブラウザ依存をなくすためにはwoffとeotにしておいたほうが良いそうだ。

コンバータは俺はこれを使ったが
WOFFコンバータ

ブラウザ上でできるのもあるらしい。まぁそうだわな。
<a href="http://zxcvbnmnbvcxz.com/convert-to-webfont/"> 手持ちのフォントをWEBフォント用に一括変換してくれるサービス【@FONT-FACE GENERATOR】 – Online Convert to WEBFONT</a>
手持ちのフォントをWEBフォント用に一括変換してくれるサービス【@FONT-FACE GENERATOR】 – Online Convert to WEBFONT | Stronghold

つくるのは*.woffと*.eotファイル。

2. cssを書く

メモ帳かなんかに読み込むフォントのcssを作成。font.cssとかで保存する。

@font-face {
  font-family: b;
  font-style: normal;
  font-weight: 400;
  src: local('Utsukushi.otf'),
       url("Utsukushi.eot") format('eot'),
       url("Utsukushi.woff") format('woff');
}

cssとフォントを同じフォルダに配置する場合はこれでよし。変える人は変えてください。わかんない人は同じフォルダに配置すべし。localってのはローカルにフォントをインストールしている場合なので、汎用的なフォントならそっちのほうがよいかもしれません。美しフォントはさすがにあんまりいないだろうなぁ…
Utukushi.otfとかになっているところを使用するフォント名に変更してください。

3. googleドライブにホスティング用のフォルダを用意する

GoogleドライブにBloggerで使う外部CSSをホスティングさせてみる : たき備忘録
だいたいはここに書いてあるんだが、

フォルダを作成する
作成したフォルダの上で右クリックをして[共有]->[共有]と選択する
アクセスできるユーザの一つ目の項目の[変更]をクリックして「ウェブ上で一般公開」を選び保存する

4. CSSをアップロードし、はてなブログから読み込む設定をする

フォルダに移動し、作成したcssファイルをアップロードする
アップロードしたファイルの上で右クリックして[共有]->[共有]と選択する
共有するリンクの[ここの文字列]の部分(実際は英数字です）をメモる。ここの文字列ってなってるのがフォルダのIDです
- https://drive.google.com/file/d/[ここの文字列]/edit?usp=sharing
ブラウザで下記のURLにアクセスし、ファイルにアクセス可能なことを確認する
- https://googledrive.com/host/[ここの文字列]/[ファイル名]
アクセスしたブラウザのURLバーに表示されているURLをコピーする
- drive.google.comの前にトークンがついてるのでそれもコピーしたほうがよさ気。
デザイン設定を開き、詳細設定のCSSに追記する

@import url("コピーしたURL");
h1#title{
    font-family: b, "Meiryo UI", sans-serif;
}

CSSへのアクセスはちょっと遅いみたいなので、デザイン設定に直接fontの設定を書きたい場合は、
https://googledrive.com/host/[ここの文字列]/フォント名.eot
https://googledrive.com/host/[ここの文字列]/フォント名.woff
で同じようにブラウザからアクセスしてトークンをくっつけ、

@font-face {
  font-family: bdirect;
  font-style: normal;
  font-weight: 400;
  src: local('Utsukushi.otf'),
       url("eotファイルのURL") format('eot'),
       url("woffファイルのURL") format('woff');
}

とする。ローカルはローカルのやつなので特にURLはいりません。font-familyは被らないように注意。