Fonts

Learn how to configure and manage fonts in Polotno - Google Fonts, design fonts, and global fonts

Polotno supports three distinct font systems, each serving different purposes:

Type	Stored in JSON	User can remove	Use case
Google Fonts	No	No	Default font library
Design Fonts	Yes	Yes	Per-design custom fonts
Global Fonts	No	No	App-wide custom fonts

Google Fonts

By default, Polotno provides access to a large library of Google Fonts. These fonts appear in the font dropdown in the Text side panel.

Customize the Google Fonts list

import { setGoogleFonts } from 'polotno/config';

// limit to specific fonts only
setGoogleFonts(['Roboto', 'Open Sans', 'Lato']);

// disable Google Fonts entirely
setGoogleFonts([]);

// restore the full default list
setGoogleFonts('default');

Customize font variants

By default, Polotno loads regular, italic, bold, and bold italic styles. You can customize which variants to load:

import { setGoogleFontsVariants } from 'polotno/config';

// default variants
setGoogleFontsVariants('400,400italic,700,700italic');

// load only regular and thin
setGoogleFontsVariants('400,100');

Get Google Fonts API endpoints

import { getGoogleFontsListAPI, getGoogleFontImage } from 'polotno/config';

// get URL to fetch the fonts list
const listUrl = getGoogleFontsListAPI();

// get preview image URL for a specific font
const previewUrl = getGoogleFontImage('Roboto');

// example usage in JSX
<img src={getGoogleFontImage('Roboto')} alt="Roboto font preview" />

Design Fonts

Design fonts are custom fonts attached to a specific design (JSON file). When you export with store.toJSON(), these fonts are included in the fonts array of the output.

Key characteristics:

Stored in store.fonts and exported with store.toJSON()
Visible in the fonts dropdown in the Text side panel
Users can remove them via the default UI (removes the reference from JSON)
Ideal for per-design or per-user custom fonts

Add a design font

// simple usage with URL
store.addFont({
  fontFamily: 'MyCustomFont',
  url: 'https://example.com/fonts/MyFont.ttf',
});

// full control over font styles
store.addFont({
  fontFamily: 'MyCustomFont',
  styles: [
    {
      src: 'url("https://example.com/fonts/MyFont-Regular.ttf")',
      fontStyle: 'normal',
      fontWeight: 'normal',
    },
    {
      src: 'url("https://example.com/fonts/MyFont-Bold.ttf")',
      fontStyle: 'normal',
      fontWeight: 'bold',
    },
    {
      src: 'url("https://example.com/fonts/MyFont-Italic.ttf")',
      fontStyle: 'italic',
      fontWeight: 'normal',
    },
  ],
});

// register a font already loaded via CSS
store.addFont({
  fontFamily: 'MyCustomFont',
});

Remove a design font

store.removeFont('MyCustomFont');

Load a font for rendering

Text elements on the canvas load fonts automatically. Use this method when you need to render fonts elsewhere in your UI (e.g., font picker preview):

await store.loadFont('MyCustomFont');

Global Fonts

Global fonts are custom fonts registered at the application level. They are not stored in the design JSON, which keeps exports smaller. You control when and how to register these fonts.

Key characteristics:

NOT included in JSON export (smaller file size)
Developer controls when to add/remove them
Can serve all users or specific users (your logic decides)
Users cannot remove them via the default UI
Must be manually added to JSON for Cloud Render

Add a global font

import { addGlobalFont } from 'polotno/config';

// simple usage with URL
addGlobalFont({
  fontFamily: 'BrandFont',
  url: 'https://example.com/fonts/BrandFont.ttf',
});

// full control over font styles
addGlobalFont({
  fontFamily: 'BrandFont',
  styles: [
    {
      src: 'url("https://example.com/fonts/BrandFont-Regular.ttf")',
      fontStyle: 'normal',
      fontWeight: 'normal',
    },
    {
      src: 'url("https://example.com/fonts/BrandFont-Bold.ttf")',
      fontStyle: 'normal',
      fontWeight: 'bold',
    },
  ],
});

// register a font already loaded via CSS on the page
addGlobalFont({
  fontFamily: 'BrandFont',
});

Remove a global font

import { removeGlobalFont } from 'polotno/config';

removeGlobalFont('BrandFont');

Replace all global fonts

import { replaceGlobalFonts } from 'polotno/config';

replaceGlobalFonts([
  { fontFamily: 'Font1', url: 'https://example.com/font1.ttf' },
  { fontFamily: 'Font2', url: 'https://example.com/font2.ttf' },
]);

Frameworkless integration

For iframe or frameworkless integrations, use the global config object:

window.polotnoConfig.addGlobalFont({
  fontFamily: 'BrandFont',
  url: 'https://example.com/fonts/BrandFont.ttf',
});

Global Fonts and Cloud Render

Global fonts are not included in the JSON export. If you use Cloud Render API, designs using global fonts will fail to render correctly unless you manually include the fonts.

Before sending JSON to Cloud Render, add the required global fonts to the fonts array:

const json = store.toJSON();

// manually add global fonts used in this design
json.fonts = [
  ...json.fonts,
  {
    fontFamily: 'BrandFont',
    url: 'https://example.com/fonts/BrandFont.ttf',
  },
];

// send to Cloud Render
await fetch('https://api.polotno.com/api/render', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    design: json,
    outputFormat: 'png',
    // ... other options
  }),
});

When to Use Each Font Type

Scenario	Recommended type
Default fonts for all users	Google Fonts or Global Fonts
Brand fonts for your app	Global Fonts
User-uploaded custom fonts	Design Fonts
Fonts that must persist in exported JSON	Design Fonts
Fonts for specific users (e.g., premium)	Global Fonts (add conditionally)
Keeping JSON files small	Global Fonts

Font Upload Configuration

By default, users can upload fonts from the Text side panel. These are converted to Base64 and stored as design fonts.

To upload fonts to your server instead:

import { setFontUploadFunc } from 'polotno/config';

async function uploadFont(localFile: File): Promise<string> {
  const formData = new FormData();
  formData.append('file', localFile);
  
  const res = await fetch('https://your-server.com/upload-font', {
    method: 'POST',
    body: formData,
  });
  
  const { url } = await res.json();
  return url; // return the URL where the font is hosted
}

setFontUploadFunc(uploadFont);

Fonts & Text Consistency — troubleshoot rendering differences across browsers and platforms
Store API — full API reference for store.addFont, store.removeFont, store.loadFont
Cloud Render API — server-side rendering with custom fonts

On this page