We created this example site to show a simple integration

First, set up your Semplice site →

Make sure you add your Semplice site domain name to the Cross-Origin API Access setting in your Fontdue site settings. This will whitelist your site for access to the Fontdue API and webfonts. (For the example, we entered

The remaining steps refer to the Semplice admin panel.

Install Fontdue.js

Navigate to Settings → General → HTML Head, and copy this code:

<link rel="stylesheet" href="">
<script type="text/javascript" src=""></script>

Initialize Fontdue javascript:

  1. Navigate to Customize → Advanced → Custom JavaScript and click Edit JavaScript
  2. Paste this code. Replace with your Fontdue URL.
  3. fontdue.initialize({
      url: "",
      config: {
        typeTester: {
          min: 12,
          max: 480,
          selectable: true,
          textInput: true,
          groupEdit: true,
          shy: true,
          buyButton: true,
          selectButtonLabel: 'Buy',
          selectButtonStyle: 'outlined',
    if (!document.querySelector('fontdue-store-modal')) {	
      var modal = document.createElement('fontdue-store-modal');

Adding Fontdue widgets

Create a Project for each of your typeface projects.

To add widgets like Buy Button and Type Testers, click Modules and drag in a Code block.

<fontdue-buy-button collection-slug="ibm-plex"></fontdue-buy-button>

When you preview the project page, clicking the Buy Button should now open the Fontdue modal for that particular font family.

For full widget documentation, visit the docs.

Webfonts configuration

Add configuration for your Fontdue-hosted webfonts for your site's typography.

Navigate to Customize → Webfonts, and Add Resource.

You need to create one webfont Resource for each of your site's font families.


We don't yet expose the Embed Code in the Fontdue admin panel, just get in touch and we'll send you the codes to use.


Now click Add Webfont and add each style. Make sure you select Via Fontname and always use the settings shown in the screenshot. Only the System Name changes for each font style.


You should see the webfonts loading in the list after adding them


Now you can navigate to Customize → Typography, and choose the new fonts for your site's typography.