現在テンプレートEpicを使っていますが、Naturalの雰囲気が好きで、フォントだけ“Josefin Sans”へ変更したいのですが、方法が分かりません。
どなたかお詳しい方、教えていただけると嬉しいです。
どうぞよろしくお願いいたします。
「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ゴシック」で表示されると思います。)
フォント変更が反映されたと思ったのですが、気になる事があって確認してみたら反映されませんでした。
フォントのCSSをインポートする記述は、「デザインCSS」欄の最初、またはテーマのCSSインポートより先に記述するようにしてください。(※フォント指定の変更など、通常のCSSを追加する箇所は変更ありません。)
※結果的に上記回答の内容には一部間違いがあります。
すみませんでした。こちらのコメントの内容が正しい物になります。
※Googleフォントを複数使用したい時は、「@import ~」を複数記述します。(ブログタイトルとその他の場所で違うフォントを使いたい場合にどうぞ。ただし、あまりたくさん使うと読み込みが遅くなります。)
※Googleフォントでは「|」(パイプ)で区切る方法を示していますが、変更の保存時に自動変換が行われるらしく、パイプ以降は削除されるので使用できません。(1つ目に記述したフォントのみ有効になります。)
2013/11/12 23:03:27・Getting Started【Specifying font families and styles in a stylesheet URL】より抜粋
https://developers.google.com/fonts/docs/getting_started#Syntax
ご丁寧に再度お調べいただいて、どうもありがとうございました!
2013/11/15 15:12:51微妙に変わったと思ったのですが錯覚だったのでしょうか(笑)、上記設定をし直しましたら劇的に変化しました!大満足です。
どうもありがとうございました!