Lay Theme

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.

💡

This guide does not require any web development experience. It's a great option providing you with a high level of customization without writing any code.

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 SiteSecuritySettings and add your website URL to the Cross-origin API access. Make sure it starts with https:// and does not include a trailing slash.

image

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;
💡

Keep in mind, each entry we add to the Font Manager will be a particular style, rather than a family.

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

image

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.

image
⚠️

It may not appear in the preview until you click Save changes.

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

<script>
  // Lay Theme triggers this callback when new pages render
  window.laytheme.on("newpageshown", function(){
    fontdue.initialize({
      url: "https://example.fontdue.xyz",
      config: {
        typeTester: {
          min: 6,
          max: 480,
          priceBar: false,
          selectable: true,
          buyButton: true,
          textInput: true,
        },
      },
    });
  });
</script>

Make sure to replace example.fontdue.xyz 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

image

Enter the following code

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

Replace ibm-plex with the slug of your family or collection

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. The data-collection-id should be the same as the Buy Button.

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

The waterfall of Type Testers will populate in this block.