Reference

Guides

Information

Updates

© Fontdue, 2022

Wordpress + Lay Theme

This guide uses the Lay Theme which gives you a powerful grid-based WYSIWYG editor to build your site. But the ideas in here apply to other Wordpress themes, as well as other CMS options.

We set up a demo site at https://fontdue-laytheme-demo.onrender.com and will use this as a reference for this guide.

Follow the Lay Theme instructions to install Wordpress with Lay Theme.

Grant your Lay Theme site access to Fontdue

Determine your site's domain name (e.g. https://fontdue-laytheme-demo.onrender.com).

In your Fontdue dashboard, navigate to Site → Security → Settings and add your website URL to the Cross-origin API access. Make sure it starts with https:// and does not include a trailing slash.

Use your fonts in the Lay Theme UI

Make sure you've uploaded some fonts to your Fontdue dashboard first.

In the Wordpress admin, find Lay Options → Webfonts.

In the Font Manager panel, add fonts. Click Add by "<link>" tag and CSS.

We used these values for example, to add our "IBM Plex Mono Regular" style. Find the link tag and the CSS for the relevant Family in the Fontdue dashboard (on the Webfonts tab).

Font name

IBMPlexMonoRegular

Link tag

<link href="https://fonts.fontdue.com/example/css/ibm-plex-mono" rel="stylesheet" property="stylesheet">

"font-family" CSS

font-family: 'IBM Plex Mono Regular';
font-weight: 400;
font-style: normal;

It should look like this, the Test Sentence should be rendered appropriately in your font.

Make sure to click Save changes after entering this.

Now, navigate to Text Formats in the Wordpress menu. Your custom fonts will now show up in the Font Family menu. We updated the default text format to use IBM Plex Mono Regular. Make sure you set Font Weight to 400 for all Fontdue webfonts.

You can add additional font styles you want to use througout your site the same way. The Text Formats feature is the recommended way to organize your site's typography. Read more here

Adding Fontdue javascript widgets

In the wordpress admin, navigate to Lay Options→Custom CSS & HTML.

Add the following code to the section Custom HTML at bottom.

<fontdue-store-modal></fontdue-store-modal>

<link rel="stylesheet" href="https://js.fontdue.com/fontdue.css">
<script type="module">
  import fontdue from "https://js.fontdue.com/fontdue.esm.js";
  
  fontdue.initialize({
    // replace this your Fontdue URL
    url: "https://example.fontdue.com", 
    config: {
      // these are just for example, for all available options visit
      // https://docs.fontdue.com/fontduejs
      typeTester: {
        min: 6,
        max: 480,
        selectable: true,
        buyButton: true,
        textInput: true,
      },
    },
  });
</script>

Make sure to replace example.fontdue.com with your Fontdue store domain name.

Notice the fontdue-store-modal element, this will make sure the Store Modal widget is accessible from every page.

Let's also give the body a default font-family while we're here, in the Custom CSS section.

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

Click Save changes.

Add a Buy Button to your project page

On a Project page, click the + HTML button

Enter the following code

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

This will add button to the page, when clicked it opens up the Store Modal page for that collection.

Add Type Testers to your project page

In your Fontdue dashboard, add some Type Testers content to one of your collections. We used the Generate Waterfall tool to create a type tester for each style in the IBM Plex superfamily.

Add another HTML block with the following code (replace the collection-slug)

<fontdue-type-testers collection-slug="ibm-plex" default-mode="local"></fontdue-type-testers>

The waterfall of Type Testers will populate in this block.

Add the Character Viewer

Add an HTML block as above with this code.

<fontdue-character-viewer collection-slug="ibm-plex"></fontdue-character-viewer >

The character viewer has a “sticky” behavior where the currently active glyph (the “monitor”) will stick to the viewport. But Lay Theme’s styles prevent this from working. We can fix it by adding some custom CSS to override Lay Theme’s styles. Go to Lay Options → Custom CSS & HTML, and add this to the Custom CSS section:

.lay-content,
.grid-inner {
    overflow: visible;
}

You may also want to adjust the sticky offset so that the monitor appears below Lay Theme’s own sticky top nav, which you can do with this CSS custom property:

body {
    --character_viewer_sticky_top: 60px;
}

Add the Cart Button to the main menu

Create a new Menu item with the URL value # and the Label &nsbp;

In the Screen Options up in the top right, check the box for CSS Classes, then enter cart-menu-item into the CSS Classes field for the new item.

Navigate to Lay Options → Custom CSS & HTML, and amend the custom javascript code in the Custom HTML at bottom field. This will populate the menu item we added with the cart button widget.

document.querySelectorAll('.cart-menu-item').forEach(function($el) {
    $el.innerHTML = '<fontdue-cart-button button-style="icon"></fontdue-cart-button>';
});

Now add this to the Custom CSS field, to match the styles to the other menu items.

.cart-menu-item {
    font-size: 1rem;
    width: 26px;
    height: 26px;
}

/* Optional fade in animation */

.cart-menu-item svg {
    animation: fade-in 200ms;
}

@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

• Wordpress + Lay Theme
• Grant your Lay Theme site access to Fontdue
• Use your fonts in the Lay Theme UI
• Adding Fontdue javascript widgets
• Add a Buy Button to your project page
• Add Type Testers to your project page
• Add the Character Viewer
• Add the Cart Button to the main menu