Webflow

Webflow

Webflow is a powerful design tool for building your site, giving you a high level of control over your page layout.

We created a minimal Webflow project to demonstrate how to integrate the Fontdue components into your webflow project: https://fontdue-webflow-example.webflow.io/

This tutorial follows the steps we took to set up the project.

Add the Fontdue.js snippet

Add the Fontdue code snippet to your site's Project Settings. Note you must upgrade to a paid Webflow account to add custom code. Find the Custom Code tab and add the snippet to the Footer Code section. This is also a good place to include the Store Modal component.

Replace the example.fontdue.com below with your site's fontdue url.

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

<link rel="stylesheet" href="https://js.fontdue.com/fontdue.css">
<script type="text/javascript" src="https://js.fontdue.com/fontdue.js"></script>
<script>
  fontdue.initialize({
    url: "https://example.fontdue.com",
    config: {
      typeTester: {      
        min: 6,
        max: 480,
        selectable: true,
        textInput: true,
        groupEdit: true,
        shy: true,
        initialMode: 'local',
        buyButton: true,
        selectButtonLabel: 'Buy',
        selectButtonStyle: 'outlined',
      },
    },
  });
</script>

Add Fontdue widgets to your Webflow pages

To add a Fontdue widget, find the Embed element type and enter the HTML code from the Fontdue.js documentation. We added these two:

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

Note the widgets will not display in the webflow Designer UI, but will show up on your published site.

Since they don't display, they can be hard to find. You must use the Navigator panel to find and edit the Embed codes.

We added a Section to add some margin below the Buy Button.

image

Publish your site

To see the widgets in action, click the Publish button. Webflow will give your site a domain on webflow.io and we must tell Fontdue this domain is allowed access. Find the Cross-origin API access setting in the Settings→Security section of your Fontdue admin dashboard, and add the domain. We added this value to the field.

https://fontdue-webflow-example.webflow.io

Webflow is a super powerful way to build a fully customized foundry site and this tutorial only scratches the surface.