ウエブフォントを使うと、個性的なテキスト表示が可能です。やり方はとても簡単なのでメモとしてここにまとめておきます。
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);
注意:ウエブフォントのライセンス
ウエブフォントは設定されているライセンスがそれぞれ違います。有料・無料の区別は当然ですが、オープンソースであってもライセンスをきちんと理解してから利用しましょう。