FC2ブログを使用しております。
CSSの@font-face値を使って、フリーのWebフォントを使用したいです。
その際、Webフォントをどこかにアップロードして、それを参照する必要があると知りました。
しかし、FC2ブログにttfなどのファイルをアップロードしようとすると、拡張子制限がかかってしまいます。
よって他のアップローダなどを使用しなければならない、と考えました。
そこで質問です。
1.Webフォントをアップロード出来そうな場所を教えてください。
2.Webフォントが利用できる他の方法をご存知でしたら、ぜひご教授ください。
ちなみに、「Google Web Fonts」は利用したことがあります。
些細なことでも構いません。
ご意見お待ちしております。
No.1ベストアンサー
- 回答日時:
はじめまして。
私どもの環境で試行錯誤した結果、成功致しましたので方法を御紹介致します。まず、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
- 回答日時:
回答が遅くなり、申し訳御座いません。
無事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/をオープン致しました。まだコンテンツの全てを公開できておりませんが、
興味がありましたら是非御覧下さい。御待ちしております。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS Web font 会社のホームページを作成についてですが、webフォントを使用することを検討しており 4 2022/11/04 10:36
- その他(IT・Webサービス) この英文フォントに似た、無料のフォントを探してるんですがフォントの種類あり過ぎて探せません( ; ; 1 2022/08/27 15:43
- 政治 私の発明した「二階建て漢字」は使えるでしょうか? 3 2023/02/08 16:40
- Illustrator(イラストレーター) 作者不明のフォントについて 「Caslon antique」というフォントを商用で使いたいのですが( 2 2022/10/11 17:21
- その他(インターネット接続・インフラ) Webサイトのフォント・級数変更について 1 2022/10/18 18:08
- ノートパソコン gifアニメ―ションを動画(mp4でOK)にしたい 1 2022/08/14 09:51
- Excel(エクセル) [テーマのフォント]、[見出しのフォント]、[本文のフォント]とは何ぞや? 2 2023/02/27 09:18
- Word(ワード) ワードフォント 一括置換の方法 4 2022/12/31 00:27
- HTML・CSS WEBサイトの構築。表示データとWEBデザインを分離する考え方を専門用語・業界用語では何と言うか? 8 2022/09/27 09:16
- 画像編集・動画編集・音楽編集 動画作成をしているのですが、使いたいフォントが見つかりません。。。 平井大がPVに使用してるフォント 2 2023/05/28 09:51
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
outlook 文字を揃えたい。tab...
-
マイクロ(μ)の文字を半角で出...
-
教えてください。
-
「MS Pゴシック」と同じ幅の...
-
縦書きテキストボックスの表示"...
-
MsgBoxについて
-
WORD VBAでハイパーリ...
-
tex の文字に関して
-
printf("文字列\\n")が円マーク...
-
Visual C++ 6.0 行番号の表示
-
Dreamweaverでフォントが反映さ...
-
エクセルVBAが中国のPCでは動か...
-
似ているフォント(Win⇔Mac)
-
font-family の記載方法
-
外国語版メイリオはある?
-
C# Font GdiCharSet
-
英語版OSでの遊明朝、游ゴシック
-
インストールされていないフォ...
-
メールで、榊の文字を木辺に神...
-
VBA(MS WORD)Unicode対応
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
outlook 文字を揃えたい。tab...
-
マイクロ(μ)の文字を半角で出...
-
教えてください。
-
Excel:一部のフォントでセルの...
-
MsgBoxについて
-
似ているフォント(Win⇔Mac)
-
「MS Pゴシック」と同じ幅の...
-
font-family の記載方法
-
英語版OSでの遊明朝、游ゴシック
-
縦書きテキストボックスの表示"...
-
C# Font GdiCharSet
-
エクセルVBAが中国のPCでは動か...
-
printf("文字列\\n")が円マーク...
-
メールで、榊の文字を木辺に神...
-
ワードでゴシックの文字を太く...
-
ホームページをTeraPadで日本語...
-
フォントファイル(.ttf , .otf)...
-
WORD全角入力しても半角に...
-
TTFファイル(TTCやOTFでもよい...
-
Visual C++ 6.0 行番号の表示
おすすめ情報