はてなブログの文字フォント変更方法について教えて下さい。

現在テンプレートEpicを使っていますが、Naturalの雰囲気が好きで、フォントだけ“Josefin Sans”へ変更したいのですが、方法が分かりません。
どなたかお詳しい方、教えていただけると嬉しいです。
どうぞよろしくお願いいたします。

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2013/11/11 16:18:06

ベストアンサー

id:rouge_2008 No.1

回答回数595ベストアンサー獲得回数351

「Google Fonts」というWebフォントサービスの「Josefin Sans」フォントを利用して表示しています。

「Natural」テーマのCSSファイルの最初の方に次のような記述があります。

@import 'http://fonts.googleapis.com/css?family=Josefin+Sans:600';

上記をコピーして、「カスタマイズ」タブの「デザインCSS」の欄にペーストします。

/* <system section="theme" selected="xxxxx"> */
@import "/css/theme/xxxxx/xxxxx.css";
/* </system> */

/* ここ以降に追加 */

※選択したテーマのCSSファイルを読み込む記述よりも後に記述します。

さらにフォントを適用する為に次の記述を続けて追加します。

body {
  font-family: 'Josefin Sans', 'Gill Sans', 'Helvetica', 'Arial', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;
}

※「Natural」テーマと同じ指定内容です。


※「Josefin Sans」は英字フォントですので、漢字・ひらがな・カタカナなどの日本語には適用されません。
日本語部分は利用しているPC環境によって、違うフォントが適用されて表示されます。(上記のように指定した場合は、「ヒラギノ角ゴ Pro W3」(※前出と同じフォントの英語表記「Hiragino Kaku Gothic Pro」、「メイリオ」(※前出と同じフォントの英語表記「 Meiryo」、「MS Pゴシック」(※前出と同じフォントの英語表記「MS PGothic」)の優先順で、インストールされているフォントが適用されます。
おそらくMac環境では「ヒラギノ角ゴ Pro W3」で、Windows Vista以降の環境では「メイリオ」で、Windows XP環境では「MS Pゴシック」で表示されると思います。)

他1件のコメントを見る
id:rouge_2008

フォント変更が反映されたと思ったのですが、気になる事があって確認してみたら反映されませんでした。
フォントのCSSをインポートする記述は、「デザインCSS」欄の最初、またはテーマのCSSインポートより先に記述するようにしてください。(※フォント指定の変更など、通常のCSSを追加する箇所は変更ありません。)

/* フォントのCSSファイルをインポートする記述はここに追加 */
/* <system section="theme" selected="xxxxx"> */
/* または、フォントのCSSファイルをインポートする記述はここに追加 */
@import "/css/theme/xxxxx/xxxxx.css";
/* </system> */

/* CSSはここ以降に追加 */

※結果的に上記回答の内容には一部間違いがあります。
すみませんでした。こちらのコメントの内容が正しい物になります。


※Googleフォントを複数使用したい時は、「@import ~」を複数記述します。(ブログタイトルとその他の場所で違うフォントを使いたい場合にどうぞ。ただし、あまりたくさん使うと読み込みが遅くなります。)

@import url(http://fonts.googleapis.com/css?family=Font1:400);
@import url(http://fonts.googleapis.com/css?family=Font2:400);

/* <system section="theme" selected="xxxxx"> */
@import "/css/theme/xxxxx/xxxxx.css";
/* </system> */

/* CSSはここ以降に追加 */

※Googleフォントでは「|」(パイプ)で区切る方法を示していますが、変更の保存時に自動変換が行われるらしく、パイプ以降は削除されるので使用できません。(1つ目に記述したフォントのみ有効になります。)

・Getting Started【Specifying font families and styles in a stylesheet URL】より抜粋
https://developers.google.com/fonts/docs/getting_started#Syntax

To request multiple font families, separate the names with a pipe character (|).

For example, to request the fonts Tangerine, Inconsolata, and Droid Sans:

http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans

Requesting multiple fonts allows you to use all of those fonts in your page. (But don't go overboard; most pages don't need very many fonts, and requesting a lot of fonts may make your pages slow to load.)

2013/11/12 23:03:27
id:riamala

ご丁寧に再度お調べいただいて、どうもありがとうございました!
微妙に変わったと思ったのですが錯覚だったのでしょうか(笑)、上記設定をし直しましたら劇的に変化しました!大満足です。
どうもありがとうございました!

2013/11/15 15:12:51

コメントはまだありません

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

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

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

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