A font collection or Font packFont packA hand-picked set of styles or whole families from anywhere in the catalog, sold together at one price with its own licenses, content, and slug. Unlike a bundle, it isn’t tied to one family or superfamily. with a password is not accessible until a visitor enters the password using this form. The form hides itself once the visitor has access, and it refreshes the page on success. So, to set up basic password access, place this form next to a Buy Button (for example). In the example below, only the form is visible until the password is entered, and then only the Buy Button is visible.
To “undo” the password access, you need to clear your cookies (_fontdue_session*).
On a server-rendered React site the password gate works differently: your page detects the lock and renders the form, rather than the form detecting it. See Password-protected collections for that setup. The custom element documented here is for script-tag sites, where it detects the lock itself.
<fontdue-node-password-form
collection-slug="ibm-plex"
></fontdue-node-password-form>
<fontdue-buy-button
collection-slug="ibm-plex"
></fontdue-buy-button>
| Property | Description | Type |
|---|---|---|
collection-id or collection-slug |
Identifier for a collection. Required unless you pass a font pack identifier. | string |
font-pack-id or font-pack-slug |
Identifier for a font pack, in place of collection-id / collection-slug. |
string |
For a font pack, pass its identifier instead – the Buy Button beside it takes the same one:
<fontdue-node-password-form
font-pack-slug="anniversary-pack"
></fontdue-node-password-form>
<fontdue-buy-button
font-pack-slug="anniversary-pack"
></fontdue-buy-button>