日本語Webフォントを利用する際に気をつけたいライセンスのこと

Webフォントを利用する際に、その使い方と合わせて「フォントに対するライセンス」をきちんと理解しておく必要があります。Webフォントだから勝手に何も気にせずに使っていいというわけではないので、細かいことかもしれませんが正しく利用するように心掛けていきましょう。

特に日本語フリーフォントにおいては、

このあたりが適用されることが多く、いずれかのライセンスが適用されている場合にWebフォントとして利用することができるようになっています。

それでは、試しに日本語のフリーフォントを使用する例を実際に見てみましょう。

今回サンプルとして使用させて頂いたのは「Typing Art」さんの「はんなり明朝」です。

デモサンプル

▼フォントの無料ダウンロードはこちらからできます。

Typing Art｜日本語フォント「はんなり明朝」

はんなり明朝は「IPAフォントライセンスv1.0」に準じているので、以下の項目をcssのソースコードに記載する必要があります。

IPAフォントライセンスv1.0に準じていること
配布元のURL
IPAフォントのURL
IPAフォントライセンスv1.0のURL

ライセンスの明示方法

IPAフォントライセンスv1.0の場合

/*
 * "フォント名" licensed under the IPA Font License Agreement v1.0
 * http://www.fontsample.com/（配布元のURL）
 * http://ipafont.ipa.go.jp/（IPAフォントのURL）
 * http://ipafont.ipa.go.jp/ipa_font_license_v1.html（IPAフォントライセンスv1.0のURL）
 */
@font-face {
	font-family: 'フォント名';
	src: url('フォント名.eot?') format('oldIE'),
	     url('フォント名.woff') format('woff'),
	     url('フォント名.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

* "フォント名" licensed under the IPA Font License Agreement v1.0

* http://www.fontsample.com/（配布元のURL）

* http://ipafont.ipa.go.jp/（IPAフォントのURL）

* http://ipafont.ipa.go.jp/ipa_font_license_v1.html（IPAフォントライセンスv1.0のURL）

@font-face {

font-family: 'フォント名';

src: url('フォント名.eot?') format('oldIE'),

url('フォント名.woff') format('woff'),

url('フォント名.ttf') format('truetype');

font-weight: normal;

font-style: normal;

}

SIL Open Font License(OFL)の場合

/*
 * "フォント名" licensed under the SIL Open Font License
 * http://www.fontsample.com/（配布元のURL）
 */
@font-face {
    font-family: 'フォント名';
    src: url('フォント名.eot?') format('oldIE'),
         url('フォント名.woff') format('woff'),
         url('フォント名.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

* "フォント名" licensed under the SIL Open Font License

* http://www.fontsample.com/（配布元のURL）

@font-face {

font-family: 'フォント名';

src: url('フォント名.eot?') format('oldIE'),

url('フォント名.woff') format('woff'),

url('フォント名.ttf') format('truetype');

font-weight: normal;

font-style: normal;

}

Apache License2.0の場合

/*
 * Copyright (C) 2014 （配布者の名称）
 *      http://www.fontsample.com/（配布元のURL）
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
@font-face {
	font-family: 'フォント名';
	src: url('フォント名.eot?') format('oldIE'),
	     url('フォント名.woff') format('woff'),
	     url('フォント名.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

* http://www.fontsample.com/（配布元のURL）

* Licensed under the Apache License, Version 2.0 (the "License");

* you may not use this file except in compliance with the License.

* You may obtain a copy of the License at

* http://www.apache.org/licenses/LICENSE-2.0

* Unless required by applicable law or agreed to in writing, software

* distributed under the License is distributed on an "AS IS" BASIS,

* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

* See the License for the specific language governing permissions and

* limitations under the License.

@font-face {

font-family: 'フォント名';

src: url('フォント名.eot?') format('oldIE'),

url('フォント名.woff') format('woff'),

url('フォント名.ttf') format('truetype');

font-weight: normal;

font-style: normal;

}

このように、それぞれのフォントによってライセンスの明示方法が異なってくるため、必ず確認してから利用するようにしましょう。