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.
example.fontdue.com below with your site's fontdue url.
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>
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.
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.
🎉 Check it out! 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.