ちょっと面白いフォントがGoogle Fontsで使える！テキストを棒グラフや折れ線グラフ、円グラフに変換して表示できるフォント -Datatype

Freebies

Post on:2026年3月16日

sponsorsr

テキストを棒グラフや折れ線グラフ、円グラフに変換して表示するフォントがGoogle Fontsで利用できるようになったので紹介します。

たとえば、{b:15,45,80,30,60}というテキストは5つのバーがある棒グラフに、{l:2,5,3,8,1,6,4}は折れ線グラフに、{p:62}は62％の円グラフを表示するオープンソースのフォントです。

テキストを棒グラフや折れ線グラフに変換して表示できるフォント -Datatype

Datatype
Datatype -GitHub

Datatypeの特徴
Datatypeのダウンロード
Datatypeの使い方

Datatypeの特徴

Datatypeは、シンプルなテキストを視覚的なグラフに変換するOpenTypeの可変フォントです。グラフを表示するためにOpenTypeの合字置換機能を利用しており、画像やレンダリングライブラリやJavaScriptなどは一切不要です。

サポートブラウザは可変フォントをサポートしているChrome 62+, Edge 17+, Safari 11+, Firefox 62+です。

ライセンスはSIL Open Font Licenseで、個人でも商用プロジェクトでも無料で利用できます。

Datatype

Datatypeは、3種類のグラフに対応しています。

3種類のチャートに対応

棒グラフや折れ線グラフ、円グラフを表示するテキストは下記の通り。

棒グラフ（バーは最大20個まで）

{b:15,45,80,30,60}
折れ線グラフ（最大20ポイント）

{l:2,5,3,8,1,6,4}
円グラフ（単一のパーセント）

{p:62}

Datatypeは可変タイプなので、幅（50～150）や線幅（100～900）を設定できます。

幅や線幅の調整も可能

Datatypeはフォントなので、サイズも通常のフォントと同様に変更できます。

フォントサイズの変更

テキスト内にインラインでグラフを表示したり、

売上高のテキスト

テーブルの表やダッシュボードなどにも使用できます。

株価のリスト

Datatypeのダウンロード

Datatypeは、GitHubからダウンロードできます。
「Source code(zip)」をダウンロードし、解凍した「fonts」フォルダに可変フォントや.ttfやWebフォントが入っています。

Releases -Datatype GitHub

また、Google Fontsからも利用できます。

Datatype -Google Fonts

Datatypeの使い方

Datatypeの使い方は簡単で、通常のフォントと同じです。

Webページ（Webフォント）で使用する場合は、下記のようにCSSを記述します。

/* フォントを読み込む */ 
@font-face {
   font-family : 'Datatype' ;
   src : url('Datatype.woff2') format('woff2') ;
   font-display : swap ; }

 /* class名はご自由に */ 
.chart {
   font-family : 'Datatype', monospace ;
   /* オプション: 軸を調整する */ 
  font-variation-settings : 'wdth' 15 ;
   font-weight : 400 ; }

/* フォントを読み込む */

@font-face {

font-family : 'Datatype' ;

src : url('Datatype.woff2') format('woff2') ;

font-display : swap ; }

/* class名はご自由に */

.chart {

font-family : 'Datatype', monospace ;

/* オプション: 軸を調整する */

font-variation-settings : 'wdth' 15 ;

font-weight : 400 ; }

あとはclassを付与するだけで、グラフが表示されます。

売上<span class="chart"> {l:20,40,70,50,90} </span> は増加しています。

1	売上<span class="chart"> {l:20,40,70,50,90} </span> は増加しています。

また、Google Fontsで利用する場合は、下記のように記述します。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Datatype:wght@100..900&display=swap" rel="stylesheet">

上記のHTMLはhead内に記述し、あとはCSSを追加します。

.chart {
  font-family: "Datatype", monospace;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}