「Gush2」カスタマイズ その12 フォント指定

   2015/03/16

こんにちは、たけぞうです。

カスタマイズ、これが(とりあえずの)ラスト。

サイト全面のフォント指定

サイト全体のフォント指定を指定していきます。
DTPと違い、ブラウザ依存の部分も大きいですが、制作側の意図として明示的な指定はしておきたいところです。

Gush2デフォルトは日本語フォント指定なし

まず、現状を確認ですが、フォントとしては「verdana」のみで、あとはサンセリフが指定されているだけです。

/*--------------------------------------
  全体定義
--------------------------------------*/
html {
	font-family : verdana, sans-serif;
/*--------------------------------------
  1024px 全体
--------------------------------------*/
html {
	font-family : verdana, sans-serif;
}

これでももちろん問題無いですが、意図的な明示をしていきます。

方針の確認

今回の指定は「DTP Transit」さんを参考にしました。
CSSでのフォント指定について考える(2014年)

方向性としては、

  • ゴシック体基調
  • MacとWinでなるべく共通に
  • 下位互換はあまり考えない
  • としています。

    具体的には

  • OSX/Win8想定で游ゴシックを基本に
  • 游ゴシックの無い環境(OSX10.8以下/Win7以下)向けにヒラギノ・メイリオの指定も入れる
  • としました。
    結果として、先ほどのDTP Transitさんで提案されているゴシック体の指定をそのまま使わせていただきました。

    /*--------------------------------------
      全体定義
    --------------------------------------*/
    html {
    	font-family: Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    
    /*--------------------------------------
      1024px 全体
    --------------------------------------*/
    html {
    	font-family: Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    }
    

    これで、自分の想定しているフォント再現を指定出来ました。

    カスタマイズ(とりあえず)終了

    長いカスタマイズの道のりも、これでオシマイです。
    といっても、導入時の初期カスタムだけですので、今後もちょこちょこ修正はあると思いますが、一応形にはなったかなと。
    ゴリゴリにデザインされたテーマも世界観があって素敵ですが、今回の「Gush2」のようなカスタマイズしやすいテーマも自分仕様にしやすいのでいいものです。

    • このエントリーをはてなブックマークに追加
    • Pocket

    この記事へのコメントはこちら

    メールアドレスは公開されませんのでご安心ください。
    また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。

    内容に問題なければ、下記の「コメント送信」ボタンを押してください。