商業目的での利用、フォント内容の改変、改変後の再配布も自由な
M+ OUTLINE FONTS
このフォントを必要なモノだけWEBサイトで表示出来るようにする
サービスがこちら
こちらのご利用方法はカンタン！
まず！！
フォントを選ぶ！
「フォントタイプを選択」で、セレクトボックスからフォントを選びます。
美しい文字、自由なライセンス
ABCD abcd 1234567890
という文字が書いてあるのでそこを見ながら選べるのが便利です。
そのあと
サブセット化する文字を入力
ここのテキストエリアにこのフォントを使いたい文字列を入力します。
ここでひらがなすべて・・・・なら
「あいうえおかきくけこさしすせそたちつてとなにぬねの
はひふへほまみむめもやゆよわをん
がぎぐげござじずぜぞだぢづでどばびぶべぼぱぴぷぺぽっゃゅょ」
って入力すれば良いのかな・・・
と思いますが、とりあえずこのブログではタイトルだけやってみました。
変換・ダウンロード
そのご、「変換」ボタンを押します。
変換が済むと同じボタンが「ダウンロード」になっていますのでまた押します。
fontsという圧縮ファイルをダウンロードして完了です。
その後、スタイルシートに「使い方」の下にあるコードを挿入します。
WordPressの場合はテーマの直下にある style.css に記述すると良いでしょう。
その場合、fonts.zipを解凍したフォルダ「fonts」をどこに配置するかにも寄りますが
テーマの style.css と同じ階層であれば
@font-face {
font-family:'mplus-1c-heavy';
src: url('./fonts/mplus-1c-heavy-sub.eot') format('eot');
src: url('./fonts/mplus-1c-heavy-sub.woff') format('woff');
src: url('./fonts/mplus-1c-heavy-sub.ttf') format('truetype');
}
body {
font-family: 'mplus-1c-heavy';
}
※M+ 1c Heavy を選択した場合
という風に、フォントフォルダの階層が「 ../ 」ではなく 「 ./ 」になので注意してください。
そして「 body 」全体に効かせるならこのままで良いのですが、例えば Stingerテーマ のタイトルだけということであれば
body ～ の部分を下記のようにすると良いです。
.sitename,
.sitename a {
font-weight: normal !important;
font-family: 'mplus-1mn-light' !important;
}
Stinger3の子テーマとして作っている style.css ですので親テーマの sitename にある font-weight: bold; を無効にするため（好みによります。） normal を指定しなおしています。
このままテーマに fontsフォルダと style.css をアップロードすると
【BEFORE】
【AFTER】
このように変化します。
カンタンにWebフォント使ってみました。
スゴイですね。工夫次第ではかなりかっこよく使えそうです。
私のサンプルはセンスがイマイチなので出来もイマイチですが良いのができたら教えて下さいね。
