Semplice

Semplice

We created this example site to show a simple integration

First, set up your Semplice site → https://www.semplice.com/first-steps

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 https://fontdue-semplice-demo.onrender.com)

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="https://js.fontdue.com/fontdue.css">
<script type="text/javascript" src="https://js.fontdue.com/fontdue.js"></script>

Initialize Fontdue javascript:

  1. Navigate to Customize → Advanced → Custom JavaScript and click Edit JavaScript
  2. Paste this code. Replace example.fontdue.xyz with your Fontdue URL.
  3. fontdue.initialize({
      url: "https://example.fontdue.xyz",
      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');
      document.body.appendChild(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.

image

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.

image

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

image

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