jnobuyukiのブログ

研究していて困ったことやその解決に関するメモ。同じように困ったあなたのために。twitter ID: @j_nobuyuki

ウエブフォントの使い方

ウエブフォントを使うと、個性的なテキスト表示が可能です。やり方はとても簡単なのでメモとしてここにまとめておきます。

font-faceの設定

フォントの属性をCSSのなかでfont-faceとして設定します。font-familyでは後でフォントを呼び出すための名前を設定します。実際に使うフォントファイルはsrcで指定します。ちなみにNoto SansはGoogleが配布しているオープンソースのウエブフォントです。

noto - Fonts that support all languages/characters in Unicode - Google Project Hosting

@font-face{
 font-family: 'notosans';
 src: url('font/NotoSans-Regular.ttf');
}

フォントの呼び出し

font-faceで設定ができたら後は呼び出すだけです。例えばp要素のフォントをCSSで設定するときに呼び出すなら以下の通りです。

p{
 font-family: 'notosans';
}

d3.jsで設定する例としては以下の通りです。

var text = d3.select("svg").append("text").attr("width",100).attr("height",50).attr("x",0).attr("y",0).text("WORD").style("font-family","notosans").style("fill","black").style("font-size",16);

注意:ウエブフォントのライセンス

ウエブフォントは設定されているライセンスがそれぞれ違います。有料・無料の区別は当然ですが、オープンソースであってもライセンスをきちんと理解してから利用しましょう。