CSS使ってフォントの入れ替え作戦

cat-itいつのまにかWindows版のChromeの仕様変更でsans-serif が強制的にメイリオ表示になって設定をいじっても筆者の好きなフォントで表示されなくなった、MSの標準フォントは印刷前提のせいかグリフ(線)が細くてPCで見るときは目が疲れるんで、太めのフォントのほうが目にやさしい。

最近一番気に入ってるのが自作製フォント工房さんの配布している源真ゴシックと源柔ゴシック。

源真ゴシック http://jikasei.me/font/genshin/

源柔ゴシック  http://jikasei.me/font/genjyuu/

CSSのFontface使ってフォントを入れ替えよう

CSSの書き換えはStylishという定番のアドオンを使ってます。Stylish  Google Chrome ウェブストア

前にもsans-serifに強制するようなCSSの書き方をしていたんですが、最近のWEBサイトが独自の記号をWEBフォントとして使うようになったんで全部書き換えると記号が豆腐にばけて困ってました。

適当にサイト見ていたら、webフォントにローカルのフォント指定しているのを見つけて目からウロコ、参考にしたサイトのリンク失念したんで2ちゃんねるとか見ると同じような方法が出ていました。

画像はCSSでフォント置き換え前と後の当サイト※wordpress側でopensansが指定されている。

css-beforel

css-02

フォントがクッキリして見やすくなっています、指定したフォントは源真ゴシックMedium

以下レシピのCSSメモ

フォントファミリーはまとめてグループ化できるんだけど、まとめたら書き方が悪かったのかうまく動かなかったので個別に指定しています。

長くなると編集しにくくなるのでCSSファイルもゴシックとメイリオ系で分けました。

ざっくり説明すると

@font-faceがwebフォントの指定、fontt-famlyは元のフォント、src:が置き換えるフォント、localを指定することで自分のPCにインストールされてるフォントが指定できます。

MSゴシックから源真ゴシックへ

@font-face { 
font-family: "MS Pゴシック"; 
src: local("Gen Shin Gothic P Medium"); 
}
@font-face { 
font-family: "MS PGothic"; 
src: local("Gen Shin Gothic P Medium"); 
}
@font-face { 
font-family: "MS ゴシック"; 
 src: local("Gen Shin Gothic Medium"); 
}
@font-face { 
font-family: "MS Gothic"; 
src: local("Gen Shin Gothic Monospace Medium"); 
}
@font-face { 
font-family: "MS UI Gothic"; 
src: local("Gen Shin Gothic Monospace Medium") 
}
@font-face { 
font-family: "Open Sans"; 
 src: local("Gen Shin Gothic Medium") 
}

メイリオ&游ゴシックから源柔ゴシックへ

 @font-face {
font-family: "メイリオ";
src: local("Gen Jyuu Gothic Medium");
}
@font-face {
font-family: "Meiryo";
src: local("Gen Jyuu Gothic Medium");
}
@font-face {
font-family: "游ゴシック";
src: local("Gen Jyuu Gothic Medium");
}
@font-face {
font-family: "YuGothic";
src: local("Gen Jyuu Gothic Medium");
}

フォント調べるのに便利なツールちゃん

自分のインストールしているファイルや使いたい和名のフォントの英語名がわからないって場合は

windowsの人はフォントインストーラーSAKURA を使うとfontfamilyがすぐ調べられます。定番すね。

http://tam.vni.jp/soft/sakura/sakura.html

WEBページ上で表示されているフォントがマウス重ねただけでわかるChromeアドオン、ソース見なくていいのでとても捗る。

WhatFont  http://chengyinliu.com/whatfont.html