📓

Wordpress + Semplice

Log in Start free trial →

Wordpress + Semplice

We created this example site to show a simple integration

https://fontdue-semplice-demo.onrender.com/project/ibm-plex-mono

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. (Make to click Launch Semplice)

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.
  2. Change the selection to “Execute after each page transition” if you’re using page transitions.
  3. Click Edit JavaScript and paste this code. Replace example.fontdue.xyz with your Fontdue URL.
    4. 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.

💡
Find this code in the Fontdue CMS for each Family, under the Webfonts tab.
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.

Webfonts for Fontdue widgets

We need to fix Semplice’s default font-family using some custom CSS to get the Fontdue widgets inherit the custom webfonts. Add the following custom CSS, choosing one of the webfonts added in the previous step.

body {
  font-family: 'IBM Plex Mono Regular', sans-serif;
}

Adding the Cart Button to the nav bar

Semplice doesn’t allow you to add custom HTML to the navigation, but we can work around the limitation with a javascript hack.

Start by adding a new Menu Item to your navigation, with the type Custom, and set the Link field to /. Then edit the item and enter into the Classes field the value nav-cart.

Go to the Advanced customization panel and edit the Custom Javascript, and add the following code to the bottom. You may edit the attributes of the Fontdue Cart Button appropriately.

function setNavCart() {  
  document.querySelectorAll('.nav-cart').forEach(function(el) { 
    el.innerHTML = '<fontdue-cart-button label="CART" button-style="icon"></fontdue-cart-button>';
  });
}
setNavCart();

Character Viewer fix

There is an issue with the character viewer monitor not sticking properly, due to some CSS in the Semplice theme. It can be fixed by adding the custom CSS below. Adjust the value for --character_viewer_sticky_top depending on the height of your sticky navigation panel.

body {
  --character_viewer_sticky_top: 100px;
}

.sections {
  overflow: visible;
}