2016年4月7日 コーディング, デザイン

日本語のフリーフォント「自家製 Rounded M+」をWebフォントとして使ってみた

日本語のフリーフォント「自家製 Rounded M+」をWebフォントとして使う方法をまとめました。

Webフォントとは

Webフォントとは、CSS3の@font-face規則を使い、Web上にあるフォントを適用させたテキストを表示する技術です。
ユーザーの環境に依存しないので、フォントファイルさえあればどんなフォントでも表示することができます。

Webフォントを使うメリット

  • ユーザの端末環境に依存しないので、意図したデザインで表示できる
  • ベクトルデータなのでレスポンシブなサイトにも柔軟に対応
  • テキストデータのためSEO的に有利で修正も簡単

Webフォントを使うデメリット

  • 読み込みに時間がかかる

→今は、どのWebフォントサービスも早くなっているためほとんど意識しなくて大丈夫みたいです。
また、フリーフォントでも使用する文字だけを抜き出して、小さなフォントファイルを作成することで改善できます。

M+ FONTSとは

日本語はひらがな・カタカナ・漢字と文字種類が多いのでWEBフォントの数もまだ少ないです。
そんな中、「M+ FONTS」はWEBフォントとして改変、利用が可能な日本語フリーフォントとして公開されています。
M+ FONTS

M+ Web Fonts Project

それに加えて、M+ Web Fonts Projectというサイトがあります。
「M+ Web Fonts Project」とはM+ FONTSをWebフォント化して公開するプロジェクトです。
こちらのサイトでM+ FONTSをEOTとWOFFの両形式に変換したデータが公開されています!
M+ Web Fonts Project

M+ Web Fonts Project

使用例まで書いてあるので、あとはコピペするだけでM+ FONTSをWEBフォントとして使用できちゃいます!便利!

M+Web FONTS Subsetter

さらに、こちらの「M+Web FONTS Subsetter」というアプリケーションを使えば、必要な文字のみを選択して(サブセット化)WEBフォントとして利用できます。 サイトのタイトルやサイドバーの見出しなど、テキストが変わらない部分にだけフォントを適用させたい場合はサブセット化してファイルを軽くしておきたいですね。
M+Web FONTS Subsetter

M+Web FONTS Subsetter

自家製 Rounded M+をWebフォントとして使う

自家製 Rounded M+とは

自家製 Rounded M+とは、さきほど紹介した日本語フリーフォントのM+ FONTS(角ゴシック)を元にして丸ゴシックに作りかえたフォントです。 このフォントもM+ FONTSと同じくWEBフォントとして改変、利用が可能な日本語フリーフォントとして公開されています。この記事で使っているフォントが自家製 Rounded M+です!
自家製 Rounded M+

自家製 Rounded M+

ここから本題の「自家製 Rounded M+」をWebフォントとして使うまでの手順です。
「自家製 Rounded M+」サイトでttfファイルがダウンロードできるので、Webフォントとして使用するために自分でサブセット化やファイル形式の変換を行なう必要があります。自分でといっても便利なソフトがあるのでとても簡単でした!
この手順を覚えてしまえば、同じ要領で他のフォントもWebフォント化できるようになります。
(※通常のフォントと同じように、Webフォントにも著作権が発生しています。使用するフォントの利用規約等を事前によく確認してください。)

1.ファイルをダウンロード

まずは、ダウンロードページからzipファイルをダウンロードします。
Rounded M+ (標準)/Rounded-L M+ (丸さ弱め)/Rounded-X M+ (丸さ強め)という丸みの強さが異なる3種類のタイプがありますが、今回は「Rounded M+ (標準)」をダウンロードしました。
ダウンロード

ダウンロードしたzipファイルを解凍してフォルダを見てみると太さや形状が違うttfファイルがいっぱい入っています。
それぞれの違いについてはこちらで確認してください。
各フォントファミリーの違いについて

今回は、この中の「rounded-mplus-1p-regular」を使ってみました。

2.サブセットフォントメーカー・WOFFコンバータのダウンロード

次に、ダウンロードしたフォントファイルを軽くするために武蔵システムが開発・公開している2つのフリーソフトをダウンロードしてインストールしました。

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

必要な文字のみを抜き出して小さなフォントファイルを作成するソフト
サブセットフォントメーカー

WOFFコンバータ

フォントファイルの形式を、Webフォントとして使用できる標準的なWOFF形式(とIE用のEOT形式)に変更するソフト
WOFFコンバータ

3.サブセット化する

ダウンロードしたフォントファイルをサブセットフォントメーカーを使ってサブセット化します。
頻繁に更新や修正を行なうページにフォントを適用する場合は、今後新しく使われた文字にフォントが効かなくなるのでサブセット化はしません。あくまでも、使用する文字が変わらない時や、決定している時だけサブセット化を行なってファイルを軽くするようにします。

  1. 1.サブセットフォントメーカーを起動する
  2. 2.「作成元フォントファイル」欄に、対象のフォントファイルを指定する
  3. 3.「作成後フォントファイル」欄に、保存名(サブセットフォントの作成先)を指定する
  4. 4.「フォントに格納する文字」欄に、抜き出したい文字をすべて入力する
  5. 5.「書体名」欄に、適当な書体名(他と重複しない名称)を入力する
  6. 6.「作成開始」ボタンをクリックする

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

今回は、このブログ記事にだけフォントを適用させればいいので「フォントに格納する文字」欄に記事の文字列をそのままコピペしました。(同じ文字を重複して入力しても大丈夫です。)

4.フォント形式を変換

フォントファイルのサブセット化ができたら、次に、そのサブセットフォントファイルをWOFFコンバータを使ってフォント形式を変換します。

  1. 1.WOFFコンバータを起動する (※サブセットフォントメーカーで「作成終了後、WOFFコンバータを起動する」欄にチェックを入れておけば自動で起動します)
  2. 2.「変換前ファイル」欄に、先ほど作成したサブセットフォントファイルを指定する
  3. 3.「変換後ファイル」欄は、空欄のままで可
  4. 4.もしIE8以下にも対応させたいなら「EOTファイルも作成する」欄にチェックを入れる
  5. 5.「変換開始」ボタンをクリックする

WOFFコンバータ

ファイルが変換できたら、このファイルをウェブ上にアップロードすればWebフォントとして使えます。

5.CSSを記述

アップロードしたフォントをWebフォントとして使うためには、以下のようにCSSを記述します。

最後に、Webフォントを適用させる要素にCSSで「font-family:フォント名;」を指定すれば、指定した要素内の文字が読み込んだWebフォントで表示されるようになります。

font-weightの設定

「自家製 Rounded M+」には複数の太さのものが用意されています。
このようなフォントの場合、異なる太さのファイルをWebフォントとしてアップロードしておけば「font-weight」の指定によって適用するファイルを変えることができます。
例えば、下記のようにCSSを記述すると、「font-weight: normal;」または、font-weightの指定がない時は「rounded-mplus-1p-regular」が適用され、「font-weight: bold;」の時は「rounded-mplus-1p-heavy」が適用されるようになります。

まとめ

「自家製 Rounded M+」をWebフォントとして使う方法を書きましたが、この方法を使えば、日本語フォントのような重たいフォントでもWebフォントとして現実的に使えるようになるので積極的に取り入れていきたいと思います。


052-533-6950

お電話からのお問い合わせ

CONTACT

メールフォームからのお問い合わせ