Framer

Framer is a no-code website builder with a visual design canvas, similar to Figma.

Add the Fontdue.js snippet

Open the site settings by clicking the cog icon in the top right, then select Custom Code from the sidebar. Click Add Script and add the following:

Name: Fontdue.js
Placement: Start of <head>
Code:

<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({
    url: "https://example.fontdue.com",
  });
</script>

Replace https://example.fontdue.com with your Fontdue site URL.

Add a second script for the Store Modal, which provides the shopping experience (font browsing, cart, and checkout):

Name: Fontdue store modal
Placement: End of <body>
Code:

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

Add Fontdue widgets to your pages

To add a Fontdue widget to a page, click Insert (the plus icon), then find Embed under the Utility section. Drag it onto the canvas where you want the widget to appear.

Select the Embed element and in the properties panel, change the type to HTML. Paste in the widget code from the Fontdue.js documentation. For example, a Buy Button:

<fontdue-buy-button collection-slug="your-collection"></fontdue-buy-button>

Replace your-collection with your font collection’s slug.1

Other widgets you might add:

<fontdue-type-testers collection-slug="your-collection"></fontdue-type-testers>

Note the widgets won’t display in Framer’s design canvas, but will appear on your published site.

Publish your site

To see the widgets in action, publish your site. Framer will give your site a domain on framer.app (or your custom domain). You must tell Fontdue this domain is allowed access.

In the Fontdue dashboard, navigate to Settings → Security and add your site’s URL to the Cross-origin API access list, e.g. https://your-site.framer.app

This is the Slug field on the font collection’s Settings tab.↩︎

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