Datatype integration guide

How to use Datatype in web projects, frameworks, and static site generators

Quick start

1. Download the font

Get Datatype.woff2 from the latest release and add it to your project.

2. Load the font

Add this CSS to your stylesheet:

@font-face {
  font-family: 'Datatype';
  src: url('/fonts/Datatype.woff2') format('woff2');
  font-weight: 100 900;      /* Variable weight axis */
  font-stretch: 0% 100%;     /* Variable width axis */
  font-display: swap;
}

3. Apply to chart elements

Style elements that contain chart syntax:

.chart {
  font-family: 'Datatype', sans-serif;
  font-feature-settings: 'liga' 1, 'calt' 1;
  font-variant-ligatures: common-ligatures contextual;
  letter-spacing: 0;
}

4. Use chart syntax

<p>
  Sales <span class="chart">{l:20,45,60,55,80,95}</span> are up this quarter.
</p>

Framework-specific setup

Next.js

Using next/font/local (Recommended)

// app/layout.js or pages/_app.js
import localFont from 'next/font/local'

const datatype = localFont({
  src: './fonts/Datatype.woff2',
  variable: '--font-datatype',
  weight: '100 900',
  stretch: '0% 100%',
  display: 'swap',
})

export default function RootLayout({ children }) {
  return (
    <html className={datatype.variable}>
      <body>{children}</body>
    </html>
  )
}

CSS:

.chart {
  font-family: var(--font-datatype), sans-serif;
  font-feature-settings: 'liga' 1, 'calt' 1;
}

Astro

Place Datatype.woff2 in public/fonts/, then add to your layout:

---
// src/layouts/Layout.astro
---
<style is:global>
  @font-face {
    font-family: 'Datatype';
    src: url('/fonts/Datatype.woff2') format('woff2');
    font-weight: 100 900;
    font-stretch: 0% 100%;
    font-display: swap;
  }

  .chart {
    font-family: 'Datatype', sans-serif;
    font-feature-settings: 'liga' 1, 'calt' 1;
  }
</style>

Vite / React / Vue

Place font in public/fonts/, then add to your CSS:

/* styles.css or App.css */
@font-face {
  font-family: 'Datatype';
  src: url('/fonts/Datatype.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 0% 100%;
  font-display: swap;
}

.chart {
  font-family: 'Datatype', sans-serif;
  font-feature-settings: 'liga' 1, 'calt' 1;
}

Eleventy (11ty)

Place font in src/fonts/ and add passthrough copy:

// .eleventy.js
module.exports = function(eleventyConfig) {
  eleventyConfig.addPassthroughCopy("src/fonts");
};

Then add CSS to your stylesheet.

SvelteKit

Place font in static/fonts/, then add to app.css:

@font-face {
  font-family: 'Datatype';
  src: url('/fonts/Datatype.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 0% 100%;
  font-display: swap;
}

Variable font axes

Datatype has two variable axes you can control:

Axis	Tag	Range	Default	Effect
Width	`wdth`	0–100	50	Controls spacing between chart elements
Weight	`wght`	100–900	400	Controls line thickness

Controlling axes with CSS

Method 1: Standard properties (Recommended)

.chart {
  font-family: 'Datatype', sans-serif;
  font-weight: 600;          /* wght axis */
  font-stretch: 75%;         /* wdth axis */
}

Method 2: font-variation-settings

.chart {
  font-family: 'Datatype', sans-serif;
  font-variation-settings: 'wdth' 75, 'wght' 600;
}

Safari Note: When using font-variation-settings, include ALL axes in a single declaration. Safari doesn't merge separate axis declarations like Chrome/Firefox do.

Chart syntax reference

Bar charts

{b:value,value,value,...}

Values: 0–100
Up to 20 bars
Example: {b:15,45,80,30,60,90}

Sparklines

{l:value,value,value,...}

Values: 0–100
Up to 20 points
Example: {l:10,40,25,70,50,90}

Pie charts

{p:value}

Value: 0–100 (percentage)
Single value only
Example: {p:75}

Best Practices

Font loading

Use font-display: swap to prevent invisible text while loading
Consider preloading: <link rel="preload" href="/fonts/Datatype.woff2" as="font" type="font/woff2" crossorigin>
Host the font yourself for best performance (avoid external CDNs)

Enabling ligatures

Datatype requires OpenType ligature features to work. Always include:

font-feature-settings: 'liga' 1, 'calt' 1;
font-variant-ligatures: common-ligatures contextual;

Letter spacing

Set letter-spacing: 0 to prevent gaps in charts. Letter spacing breaks the precise glyph alignment.

Common Issues

Charts not rendering (showing raw syntax)

Causes:

Ligatures not enabled - add font-feature-settings
Font not loaded - check browser DevTools Network tab
Wrong font-family applied to element

Gaps between chart elements

Solution: Set letter-spacing: 0

Variable axes not working in Safari

Solution: Use font-weight and font-stretch properties, OR include all axes in a single font-variation-settings declaration.

Building Your Own Integration

Want to auto-wrap chart syntax in your framework or CMS? Here's how:

1. Pattern Matching

Match chart syntax with this regex:

/\{[blp]:\d+(?:,\d+)*\}/g

2. Wrapping in HTML

Wrap matches in a span with the font applied:

<span class="datatype">{l:20,40,60}</span>

3. Example: Vanilla JavaScript

function renderDatatype(text) {
  const pattern = /\{[blp]:\d+(?:,\d+)*\}/g;
  return text.replace(pattern, match =>
    `<span class="datatype">${match}</span>`
  );
}

// Usage
const input = "Sales {l:20,45,60,55,80} are up.";
const output = renderDatatype(input);
document.getElementById('output').innerHTML = output;

4. Example: Markdown-it Plugin

function datatypePlugin(md) {
  const pattern = /\{[blp]:\d+(?:,\d+)*\}/g;

  md.core.ruler.push('datatype', state => {
    for (const token of state.tokens) {
      if (token.type !== 'inline') continue;

      for (const child of token.children) {
        if (child.type === 'text' && pattern.test(child.content)) {
          // Wrap chart syntax in HTML
          child.content = child.content.replace(pattern,
            match => `<span class="datatype">${match}</span>`
          );
          child.type = 'html_inline';
        }
      }
    }
  });
}

// Usage
const md = require('markdown-it')();
md.use(datatypePlugin);

5. Example: React Component

function Chart({ children }) {
  const pattern = /\{[blp]:\d+(?:,\d+)*\}/g;

  const parts = children.split(pattern);
  const matches = children.match(pattern) || [];

  return (
    <>
      {parts.map((text, i) => (
        <React.Fragment key={i}>
          {text}
          {matches[i] && (
            <span className="datatype">{matches[i]}</span>
          )}
        </React.Fragment>
      ))}
    </>
  );
}

// Usage
<p>
  <Chart>Sales {'{l:20,45,60,55,80}'} are up.</Chart>
</p>

Note: In JSX/MDX, curly braces are special syntax. You'll need to escape chart expressions as strings or use a wrapper component.