日本語の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

サイト内検索

最近の投稿

アイキャッチ
そろそろvuejs始める

最近はjQueryよりvueで書いた方が楽ではないかと思い学習中です。 そもそもVuejsはドキュメントが日本語対応なので試しやすいし情報も豊富なので学習しやすいです。 3大フレームワークと呼...

02 May 2021

アイキャッチ
追い風CSS(tailwindcss)が結局楽かも

最初にtailwindcssのv1が出た頃はまだbootstrapで良いかな。 htmlに入れるクラスタグが多過ぎと思っていました。あまり良い印象はなかったです。 時は過ぎいろいろと触っていると...

29 Apr 2021

アイキャッチ
エラー処理について

COJPドメンを取得する際に「登記年月日」という項目があります。 その項目通り登記した年月日を入れる訳ですが、なぜかエラーが出ました。 半角英数字にして下さいというよくあるエラーです。当然半角英...

24 Jan 2021

アイキャッチ
javascriptのundefinedの判定

jqueryで高さの数値をとって足し算をしていたらエラーも出ずに動かないということになったので調べてみました。 ワードプレスで管理画面のアドミンバーが一度ログインするとフロント画面でも表示される...

17 Jan 2021

アイキャッチ
Webpack5にアップデートしてエラーの対処方法2つ

webpack4(4.41.5)から webpack5(5.12.1)にあげました。 特に難しい設定は行っておらず主にscssと共通モジュールの設定だけで使っているのですがそれでもエラーが出たの...

09 Jan 2021

著者

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

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

タグクラウド

font web clear
フッターイメージ