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 (below) to your Webflow Project Settings (Hamburger icon → Project Settings). Note you must upgrade to a paid Webflow account to add custom code (at least the Basic plan). 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 (included below).

Replace the https://example.fontdue.com below with your Fontdue site’s url (it will be in the format https://your-site.fontdue.com)

<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.

Webfonts

Webflow allows you to upload custom fonts, which will appear in the designer UI fonts menu, but they don’t have a way for you to select your Fontdue webfonts.

It is possible however to use custom code to use your Fontdue webfonts in your Webflow site. First, find the required HTML and CSS code on the Webfonts tab of each Fontdue family. Then add those to the Custom Code - Head code settings in Webflow.

For example:

<link href="https://fonts.fontdue.xyz/example/css/Rm9udENvbGxlY3Rpb246NzUzNzU2MDgxMzQ3NDE5MTcy.css" rel="stylesheet">

<style>
  body {
    font-family: "IBM Plex Sans Regular";
    font-style: normal;
    font-weight: 400;
  }
</style>

You can also target your Webflow classes. When you create a class e.g. "Heading", it becomes a CSS class with all lowercase for you to target it like so:

.heading {
  font-family: "IBM Plex Sans Bold";
  font-style: normal;
  font-weight: 400;
}

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

🎉 Check it out! https://fontdue-webflow-example.webflow.io

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

Webflow
Add the Fontdue.js snippet
Add Fontdue widgets to your Webflow pages
Webfonts
Publish your site