Webフォントカスタマイズ
本来、日本語フォントは外来語に比較して字数が多いため、PCに入っている書体を使うのが主流。よって、メイリオからヒラギノを中心に各ブラウザやOSに合わせて美しいフォントが使われる様に指定する（その辺の情報は概出ので省略）フォントの順番が使われる優先順序となる。
body, td, th, div, p, label, input {
font- family: "Century Gothic" , Arial, "メイリオ" , "Meiryo" , "ヒラギノ角ゴ ProN W3" ,
"Hiragino Kaku Gothic ProN" , "ＭＳ Ｐゴシック" , "MS P Gothic" ,
Verdana, Arial, Helvetica, sans- serif! important;
}
ただ、クラウドによりネット上で使用できるWeb Fontsを利用する環境も整ってきたみたいでインストールやサーバーで独自でフォントを用意せずとも好きなWeb Fontsを使えるGoogle Web Fontsが魅力的だ。かなり種類が充実しているが、おのずと好みが決まってくるので以下でチョイスしてます。
http://www.google.com/fonts/#HomePlace:home にて「Start choosing fonts」をクリックしてお好みのフォントを探していきます。見つかったら下の図の緑部分をクリック。
< link = 'http://fonts.googleapis.com/css?
family=○○○○+○○○○' rel= 'stylesheet' type= 'text/css' >
/* ○○○はgoogleフォント名でたいてい＋で繋いでいる */ 任意のクラス名 {
font- family: '○○○○ ○○○○' , sans- serif;
}
/* ○○○はgoogleフォント名でCSSでは＋を省く */
以下は、使えそうなgoogleフォントを抜粋して掲載しました。
先ほどの法則からフォント名の半角空き部分に＋が挿入されリンクの指定フォントファミリー名となります。
Add this code to your website:のURLだが、SSLで保護されているhttpsなページにコードを追加する場合、http
s ://fonts.googleapis.com/css?family=フォント名にURLを変更しないと、ChromeでWebページを確認したときに、Webフォントが表示されない。それと同じくChromeブラウザではFont Changerたるプラグインをブラウザに追加してやらないとWebフォント自体描画できないというトラブルがあるのだが…現在解明中。まだまだ安易に使うのは注意が必要。
Poiret One Font
Marcellus SC Font
Montserrat Alternates Font
Josefin Sans Font
Covered By Your Grace Font
Nothing You Could Do
Give You Glory
Just Me Again Down Here
Nixie One
Reenie Beanie
Raleway Dots
Alex Brush
さらに下記はgoogle以外のwebフォントですが、色々制約やルールがあります。
基本は同じサーバー内にアップロードして.ttf等のtruetypeを引っ張ってきます。
Bordofixed Tryout-ttf
Bordu-ttf
あんず文字フォント-eot-ttf
ふい文字フォント-woff
まきば文字フォント-woff
ふい字置き場。
その他フォントも使用方法は同じです。原理的にはPCに入ってるものをサーバーに埋め込みます。くれぐれも著作権には注意です。
武蔵システムさん
武蔵システムさんでWOFFコンバータたるものが…
●WOFFはWeb Open Font Formatの略で、Webフォントの1形式です。
●WOFFの作成と同時にEOT（Embedded OpenType）ファイルを作成することもできます。
形式
拡張子
format()の値
概要
TrueType
.ttf
truetype
WindowsやMacで使われる一般的なフォント形式
OpenType
.ttf, .otf
opentype
PostScriptとTrueTypeを統合したフォント形式。TrueType形式で作成されたものは「.TTF」、PostScript形式のものは「.OTF」となる
WebOpenFontFormat（WOFF）
.woff
woff
Web用の新しいフォント形式。データが軽いのが特徴。
EmbeddedOpenType（EOT）
.eot
embedded-opentype
米マイクロソフトが開発したWebページ用のフォント形式。IEのみ対応
SVG Font
.svg, .svgz
svg
SVGを利用したフォント形式
表3：format()の値
/* Webフォントを指定する＠ルール書式内容 */
@ font- face {
/* この仮想的なフォントのフォント集合名を定義 */
font- family: 追加フォント;
/* この仮想的なフォントの本体となるフォントへの参照URL */
src: url( http: //example.com/serverfont.woff);
}
/* あんずフォントの場合 */
/* IE対策 */
@ font- face {
font- family: Anzu;
src: url( APjapanesefont. eot) ;
}
/* Firefox, Opera, Safari 対策*/
@ font- face {
font- family: Anzu;
src: url( APjapanesefont. ttf) format( "truetype" ) ;
}
尚、http://css3.sophia-it.com/reference/Webフォントを指定するには？ に詳しく記述がされている。さらにwebフォントが全くプレビューされない問題でちょっと調べてみた結果、googlechromeの右の3本線＞設定＞詳細の設定を表示…＞ウェブコンテンツのフォントサイズを中から小に変えたら文字が出た〜なんだこりゃ？？？？？
最新版Google Chromeにてフォント一覧が正常に表示されない現象について
Google Chromeダウングレードサイト
てっく煮ブログ〜意外と多い!? Web フォントに対応していない環境 ～2012 年の Web フォント事情
chromeの最新バージョン 33.0.1750.117みたいなんで、ダウングレードするしかない…ただしこのバグが解ってる人ならwebフォントの文字抜けブランクも気づくかもしれないがそのまま見落としの方が多くて危険…かも。
