FYI, this is possible thanks to the Fontself widget, a small piece of HTML code - technically an
<iframe> - that can be embedded on web pages.
Embedding the Fontself widget
- Load the Catapult page of your hosted font and type the text you want to display in your widget (you can optionally change the font's color & size, and the widget's background color).
- Note that you do NOT need to manually authorize the Behance or Portfolio addresses in your font's domain whitelist (you're welcome ;)
- Click on Share preview at the bottom right of the text preview.
- Select and copy the embed code
[NOTE: try the Fontself widget now by using this sample code, which features the Gilbert Color font, as published from the Fontself Maker extension for Illustrator right into Catapult:
<iframe height="320" style="width:100%; border:1px solid lightgrey;" id="fs_embed_gE309jx_gilbert_color_bold_preview4" class="fs_embed_iframe" src="https://catapult-embed.fontself.com/?url=https://catapult.fontself.com/gE309jx/gilbert-color-bold-preview4&text=Welcome%20to%20the%20future%20of%20DIY%20web%20fonts.%20LOL&font-size=74" title="Gilbert Color Bold - Preview4" scrolling="no" frameborder="0"></iframe>
End of NOTE]
Now going back into Behance / Adobe Portfolio:
- Create a new project or click on one of the Embed buttons and paste the widget's custom code.
- You can also customize the embed code afterwards to change the size, colors and text by clicking on the top left pencil icon:
- Save your project and voilà! Enjoy your cool new typographic embed ;)
PS: want more control on the Fontself widget? Ping us on the chat bubble below to tell us which additional features you would enjoy (mockups are welcome).
PS2: A special thanks to the Behance team for turning a good ol' type-nerd dream into a reality (live custom font previews on Behance, that's 🤯 !!!)
And remember that you can tag the tool
Fontself in your Behance project settings:
PS3: still reading? Have a break, life is short...