はてなブログでウェブフォントを適用する方法を教えて下さい

FC2からの引っ越しを考えてテストしている段階なのですが、はてなブログのデザインについての質問です。
テーマで使われているフォントを、ウェブフォントに変更しようと頑張っているのですが、反映されず困っています。
下記の記述をデザインCSS部分に追加しています。

@font-face {
font-family: "myFont";
src: url("FC2のアドレス.eot?") format('eot'),
url("FC2のアドレス.woff") format('woff');
}
p {
font-family: 'myFont', sans-serif;
}

FC2で使っている(FC2にアップロードしている)ファイルを流用しているのがマズいのでしょうか、外部スクリプトも読み込んでくれません。
スクリプト自体は記事に埋め込む形にすれば反映されたのですが…

先輩方、ご教授下さい。

回答の条件
  • 1人50回まで
  • 登録:
  • 終了:2013/10/26 13:16:52

ベストアンサー

id:a-kuma3 No.1

回答回数4973ベストアンサー獲得回数2154

FC2で使っている(FC2にアップロードしている)ファイルを流用しているのがマズいのでしょうか、外部スクリプトも読み込んでくれません。

そうです。
FC2 でアップロードしたファイルは、他のサイトから使われるとエラーになります。
Web のリクエストは、「リファラー」といって、どのページから読みに来たか、というのが送られるんですが、FC2 のサイトでは、それをチェックしてるみたいです。

Webフォントや、スクリプトだけじゃなく、画像もそう。



って、書こうと思ったら、自分とこの(↓)は表示される。
http://blog-imgs-44.fc2.com/j/i/m/jimsie/20100729-turtle.jpg
あれっ?

適当に探してきた誰かのブログの(↓)だと、やっぱり表示されない...
http://blog-imgs-60-origin.fc2.com/m/e/r/meruloco/013_201310252306376de.jpg

画像の URL をよく見てみると...

表示される  http://blog-imgs-44.fc2.com/...
表示されない http://blog-imgs-60-origin.fc2.com/...


試しに、誰かさんのやつの -origin を削ってみると...
http://blog-imgs-60.fc2.com/m/e/r/meruloco/013_201310252306376de.jpg
# http://blog-imgs-60.fc2.com/m/e/r/meruloco/013_201310252306376de.jpg で表示してます

おおっ



もし、流用しようとしている Webフォントの URL に -origin が入ってたら、試しに削ってみてください。
もしかしたら、上手くいくかも。

でも、保証されている方法じゃないと思うので、外部からきちんとアクセスできるところに置いておくのが一番だとは思います。

id:EMLN

リファラの問題でしたか、勉強になります。
お陰様で保管場所を変えたらフォントは適用出来ました。外部スクリプトに関しては、コードの記述方法に癖があるのかまだ上手く出来ませんが、最近jquery関連で何か変更されているみたいなのでそれかも知れません。

ご回答ありがとうございました。

2013/10/26 13:05:33
id:a-kuma3

最近jquery関連で何か変更されているみたいなのでそれかも知れません。

ああ、これ。
ブログをおよそ2倍の速さで表示する、などの改善と機能追加を行いました - はてなブログ開発ブログ

jQuery の実装を定義している、はてなの外部スクリプトの読み込み位置が、随分下の方に行っちゃったので、記事の中で jQuery を使うスクリプトがエラーになっちゃいます(ぼくも、嵌った)。
記事の頭か、デザインでヘッダの中に jQuery の読み込むようにしておくのが簡単です。

2013/10/26 13:22:06
  • id:windofjuly
    うぃんど 2013/10/26 08:45:09
    はてなブログにeot、woffをアップロードして@font-faceを適用している人はいますが、
    それが公式に許された形で行われたものかどうかは不明なので、お問い合わせしてみます。
    (記事内容的に青少年の閲覧にふさわしいとは思えない部分があるのでリンクはいたしません。)

    余談
    外部参照できるかどうかも訊いてみます。
    それ以前に…、FC2の何契約か知りませんが、
    FC2はeotやwoffファイルは対象外だったと思うので確認しておいてください。
  • id:EMLN
    私がフォントを変更しようと思った切っ掛けでもあるのですが、はてなブログの公式デザインにもウェブフォントが使われています。見ればすぐ分かると思いますが、ソースを見ると上の方に仕込んであります。ですのでNGということは無いと思います。

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません