やさしさゴシックをWebフォントで使う方法。


以下はこの投稿日時点の情報です。
2016/12/22にGoogleのWebフォント「Noto Sans JP」に切り替えています。

入れたのは「やさしさゴシック」というフリーフォント。
下記は借り物の書体サンプル画像です。

yasashigothic_download3

入れ方は、まず書体のダウンロードから。
上記サイトからダウンロードに進めます。
ダウンロードしたらそれをWebフォントで使えるように加工(変換)をします。

つまりttf、eot、woffという3つのファイルを作るのですが、私はWOFFコンバータという無料ソフトを使いました。

woff
やさしさゴシックの場合はダウンロードした中にあった「07やさしさゴシック.ttf」をWOFFコンバータにかけると、

07やさしさゴシック.ttf
07やさしさゴシック.eot
07やさしさゴシック.woff

というファイルができたので、日本語のファイル名を「07yasashisa」に変えてFTPでUP(「某Dirをルート直下に作って)UPしました。

そのあと、ブログのCSSファイルをあけ(バックアップはとりました)下記のように修正しました。

(1)下記の記述を追加。
@font-face{
font-family: ’07yasashisa’;
src: url(‘/Dir名/07yasashisa.eot’);
src: url(‘/Dir名/07yasashisa.eot?#iefix’) format(‘embedded-opentype’),
url(‘/Dir名/07yasashisa.woff’) format(‘woff’),
url(‘/Dir名/07yasashisa.ttf’) format(‘truetype’);
font-weight: normal;
font-style: normal;
}

(2)そもそもあったfont-familyの日本語フォント指定を削除して07yasashisaを追加。
例:body{font-family: ’07yasashisa’;}

それをサーバにUPします。

BODYに指定したので、ページ内の文字をすべて「やさしさフォント」にしてみました。
いかがでしょうか。ご興味のある方はフリーフォントとはいえWebフォントはNGなものもあるため、そのあたりを確認してお試しください。


コメントを残す

メールアドレスが公開されることはありません。