Webフォントのアップロード場所について

質問

FC2ブログを使用しております。
CSSの@font-face値を使って、フリーのWebフォントを使用したいです。
その際、Webフォントをどこかにアップロードして、それを参照する必要があると知りました。
しかし、FC2ブログにttfなどのファイルをアップロードしようとすると、拡張子制限がかかってしまいます。
よって他のアップローダなどを使用しなければならない、と考えました。

そこで質問です。
1．Webフォントをアップロード出来そうな場所を教えてください。
2．Webフォントが利用できる他の方法をご存知でしたら、ぜひご教授ください。
ちなみに、「Google Web Fonts」は利用したことがあります。

些細なことでも構いません。
ご意見お待ちしております。

回答No.1

ゴトウ ダイスケ（@Webfonts-jp） · ベストアンサー

はじめまして。私どもの環境で試行錯誤した結果、成功致しましたので方法を御紹介致します。

まず、FC2ブログを御利用との事ですので、FC2IDをお持ちでございますね？
そのIDでFC2ホームページを開設してください。ここにフォントファイルをアップロードします。

※ファイル置き場としての利用は規約上、あまりよろしくないようなのでブログ記事のまとめなどとして利用することを推奨致します。

開設までは特に苦労することはないと思います。開設が成功しましたら、ホームページの管理画面を開いてください。
FC2IDのコントロールパネルから開けます。

開きましたら、画面左の「ファイルのアップロード」項目をクリックして下さい。
すると、アップロード用の画面が開きます。

ページ中ほどに、ファイルのアップロードという項目がありますので、「ファイルを選択」ボタンを押し、ファイルのアップロードを行います。
Webフォントの利用ですので、TTF形式の他にEOT・WOFF形式のファイルも用意する必要が御座います。

※TTFからの変換方法を御存じなければ、紹介致しますので御一報下さい。

それらのファイルをひとつずつ選択していき、アップロードを行ってください。
アップロードが無事成功致しますと、ページ上部に先程アップロードしたファイルが追加されている筈です。

アップロードしたフォントファイルの行の虫眼鏡マークを右クリックし、URLをコピーして新規のテキストファイルなどに貼り付けして保存してください。

URLは【http://あなたのユーザーアカウント.fc2.com/フォントファイル名】となります。

これでフォントファイルのアップロードが成功致しました。次にブログの設定を行います。

再度FC2IDのコントロールパネルに戻り、今度はブログの管理画面をお開きください。
管理画面が開きましたら、画面左のメニューから、「テンプレートの設定」項目を開いてください。

すると、現在ブログに登録されているテンプレートの一覧が表示されます。

その中から現在使われているテンプレートを選択し（旗マークが付いております）、【HTML CSS】の編集を押してください。

編集画面が開きましたら、画面をスクロールさせ、「default のスタイルシート編集」項目に移動してください。

尚、編集手順を誤るとブログの表示が正常に行われなくなる可能性がございますので、
編集前にスタイルシートをメモ帳などにコピー＆ペーストし、保存しておくことを推奨いたします。

それでは、Webフォントの導入に移ります。

以下のコードをコピーして、自分の環境に合わせて編集なさって下さい。

@font-face {
font-family: "フォントの名称";
src: url("先程アップロードしたフォントファイル.eot?") format('eot'),
url("先程アップロードしたフォントファイル") format('woff');
}
.webfonts-text {
font-family: "@font-faceのfont-familyで設定したフォントの名称";
font-size:15px;
}

【@font-face】の説明をいたします。

「フォントの名称」は自分の好きな名前を設定できます。なるべく半角英数で設定した方が良いでしょう。

「先程アップロードしたフォントファイル」は、先程控えたURLを貼り付ければOKです。

【.webfonts-text】ですが、これはcssの呼び出し名称ですのでお好きな名前が付けられます。こちらも半角英数で設定してください。

「font-family」には、【@font-face】で設定したフォントの名称を記述して下さい。

編集が完了しましたら、「@font-face から 下の }」までコピーし、先程の編集画面に貼り付け、更新を押してください。
cssの設定はこれにて完了となります。

最後は記事の編集ですが、別段難しいことはしませんのでご安心を。

画面左のメニューから「過去の記事の管理」を開き、Webフォントを適用したい記事を開いてください。
いつもの見慣れた編集画面が開きますね。

今回は例として、「あいうえお」という文字にWebフォントを適用します。

<span class="webfonts-text">あいうえお</span>

上のコードを入力し、記事を保存を押せば適用完了です。

汎用ブラウザ（IEやChromeなど）なら、Webフォントが正常に表示されるはずです。
Firefoxですと、クロスドメインの制約の都合上、.htaccessの設定を行う必要がございます。
ご希望であれば、こちらの方も説明させて頂きますので、御一報下さい。

お礼

ご回答ありがとうございます。
迷うことなく新しいフォントを適用することが出来ました。
分かりやすい説明に心より感謝いたします。

これを機に、後学とためにいくつかお尋ねしたい部分がございます。
目標は達成されましたので、お暇でしたら回答くださると幸いです。

1.「.htaccess」について

当方の環境はGoogle Chromeです。
よって、フォントの反映が確認されましたが、
ご指摘いただきました通り、Firefoxではフォントは反映されていませんでした。

.htaccessという単語は初見です。
Googleで調べてみましたが、全くわかりませんでした。

申し訳ございませんが、この対処法をご教授願います。

よろしくお願いします。

回答No.2

ゴトウ ダイスケ（@Webfonts-jp）

回答が遅くなり、申し訳御座いません。無事Webフォントが導入できたようで何よりです。

さて、Firefoxでの表示に関してですが、セキュリティ意識の高いFirefoxでは現在ドメインによって
ファイルを読み込むか読み込まないかを決定する機能が搭載されています。
不正なスクリプトを実行させない為の機能で、おそらく今後他のブラウザにも同じような機能が搭載されると思われます。

こういった場合、どうすれば別ドメインからファイルを呼び出すかというと、ファイルにアクセスしても大丈夫だよ、という記述を
ファイルが置いてあるサーバーに施してあげる必要があるのです。

幸い、FC2サーバーは.htaccessに対応していますので以下に対処方法を記載します。

=======================

(1)次のテキストをコピーして新規テキストドキュメントに貼り付ける

header add Access-Control-Allow-Origin "サイトのURL"

(2)サイトのURL部分を、Webフォントを適用したいフォントのドメインに置き換える。

例） http://webfonts.jpにてWebフォントを使用したい場合
header add Access-Control-Allow-Origin "http://webfonts.jp"

(3)置き換えたら、ファイル名をhtaccess.txtとして保存する

(4)FC2のホームページ管理画面に行き、画面左の「ファイルのアップロード」をクリックし、アップロード画面へ。

(5)先程保存したhtaccess.txtをアップロードする

(6)アップロードが完了したら、htaccess.txtの名前の変更を行い、「htaccess.txt」から「.htaccess」へファイル名を変更する

=======================

これにて.htaccessの設定は完了です。Firefoxで表示が正常に行われるか確認してみて下さい。
まだ正常に表示することが出来ないようなら、御一報下さい。

※本日、http://webfonts.jp/をオープン致しました。まだコンテンツの全てを公開できておりませんが、
興味がありましたら是非御覧下さい。御待ちしております。

お礼

無事Firefoxで適用することができました。
ありがとうございました。