日本語のwebフォントを作成する方法

日本語のwebフォントを作成する方法

  • 2017-11-18  最終更新日:2017-11-18

Webフォントを使うといえばGoogle Fontsを使って利用している人が多いかもしれません。 そのほか、アドビ社のTypekitやWebフォント TypeSquare タイプスクウェアなど結構Webフォントも多く使えるようになってきました。

ただ指定フォントを使って表示させたいという要望もあります。その場合にWebフォントを表示させる方法をご紹介します。

ただし、いまあるお手持ちのフォントをwebフォントとして使用出来るわけではありませんのでご指定のフォントのライセンスをご確認下さい。今回の作業はMacでの流れをご紹介します。Windowsでも流れは同じですのでわかると思います。


スポンサーリンク


フォント形式

  • woff (Web Open Font Format)
  • woff2 (Web Open Font Format2)
  • ttf (True Type Font)
  • otf (Open Type Font)
  • eot (Embedded Open Type)
  • svg (Scalable Vector Graphics Font)

一般的にはWoff (Web Open Font Format)が主流ですね、圧縮アルゴリズム違いのWoff2も徐々に使われていますね。現在だと指定はフォーマットはwoff、woff2、ttfだけで良いかもしれません。 eotはもう外しても良いかもしれません、古いIE 8以下用の指定なものですから。

準備

まず使いたいフォントをダウンロードしておきましょう。今回はテスト用ですが自家製フォント工房さまのRounded M+を使って試していきたいと思います。

一番下にダウンロードするところがありますのでzip 形式でダウンロードのところのRounded M+ (標準) : rounded-mplus-20150529.zip (63.5 MB)をダウンロードして使います。フォントに関わるライセンスについてはこちらに記載されていますのでご確認下さい。

Webフォント

さて、ダウンロードしたら解凍してフォントの中身を確認します。rounded-mplus-1m-medium.ttfを使います。

あとはサブセット化(普段使う文字だけを抜き出す作業)するのでサブセット化ソフトのダウンロードをしておきましょう。そのソフトってこれしか知らないので以下二つをダウンロードしておきましょう。

サブセットフォントメーカー

インストールしたらサブセットフォントメーカーを立ち上げます。サブセット化しない場合はWOFFコンバータを使って変換するだけですが、難しい漢字とか旧文字とか使わない場合は使い文字を指定した方が容量が少なくて良いです。

Webフォント

「作成元フォントファイル」は先ほどダウンロードしたフォントを指定します。参照からrounded-mplus-1m-medium.ttfを選びます。インストール済みのフォントからも指定できます。

「作成後のフォントファイル」には変換後のフォルダ指定とファイル名を決めます。今回はwebfontとしました。webfont.ttfとして出力されます。

フォントに格納する文字は一般的に使われる文字列の(第一水準漢字+記号+ローマ字+カタカナ+ひらがな)ぐらいで良いかと思います。ダウンロードリンクからダウンロードしたテキストをコピーペーストして下さい。

⇒ダウンロード

「作成後、WOFFコンバーターを起動する」にチェックを入れて、作成開始ボタンを押します。

Webフォント

WOFFコンバータが立ち上がります。ここではサブセットされたフォントをwoff形式に変換します。

設定する箇所は変換前ファイルは自動的にwebfont.ttfの場所が記載されているはずです。あとは変換先とファイル名を指定します。こちらも同じくwebfontとしました。

チェックボックスでEOTファイルを作成するというところは古いIE対象ならチェックを入れますが、ここはもういらないでしょう。

後は変換開始をクリックすると正常に変換しました。と表示されたら完了です。

webfont.woffとwebfont.woff2が出来ているはずです。確認してみて下さい。

あとはフォントはfontsフォルダなどに入れてアップしてcssに以下の指定をすれば出来上がりです。指定フォントで表示されているはずです。

@font-face {
	font-family: "webfont";
	src: url('path/fonts/webfont.woff2') format('woff2'),
	url('path/fonts/webfont.woff') format('woff'),
	url('path/fonts/webfont.ttf') format('truetype');
}

h1{
	font-family:webfont;
}

⇒デモを見てみる

参考になれば幸いです。


∞Tadashi Suyama∞

font web clear
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

サイト内検索

最近の投稿

アイキャッチ
大山の大献灯・和傘灯りに行った感想

大山の大献灯・和傘灯りに初めて行って参りました。13日の夜に行ってきましたがこんなイベントをやっていることを知らなかったのでご紹介します。和傘のライトアップで日本の夏の雰囲気が良いですね。 大...

23 Aug 2018

アイキャッチ
出雲神話祭り・花火大会

お盆休み中に出雲の花火大会に行って参りました、今年は8月12日(日)でした、開催日は毎年違いますので確認しておきましょう。だいたいこのあたりだった気がします。8,000発の花火で例年13万人が来...

21 Aug 2018

アイキャッチ
chromeのエクステンションを使わないでウェブページ全体をスクリーンショットでとる方法

さて今回はchromeブラウザ限定ですがエクステンションを使わずにページ全体と部分キャプチャをする方法をご紹介します。 割とエクステンションで処理しちゃう場合がありますがデフォルトで使えるとい...

05 Aug 2018

アイキャッチ
はじめてのVim覚え書き

今回はエディターのご紹介になります。かなり特殊なVimエディターをご紹介したいと思います。便利なエディターAtom、SublimeText、VisualStudioCodeとは訳が違います。 ...

28 Jul 2018

アイキャッチ
リニューアルした水木しげるロードは夜がおすすめ

さて、先日14日にリニューアルした境港の通称鬼太郎ロードに行って参りました。鬼太郎に会える町として新たに妖怪を追加して約800mの通りに177体の妖怪ブロンズ像がお出迎え、ゾーン分けをして再配置...

17 Jul 2018

著者

ウェブエンジニアのSUYAMAのブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

タグクラウド

font web clear
フッターイメージ