Using own fonts for the fonts dropdown

Modified on Thu, 27 Jul 2023 at 12:31 PM

You can set up the available fonts, that your customers can choose from, via the fonts option.


Custom Fonts

You can easily register custom TrueType fonts (ttf).

Move your ttf files in a fonts folder.


Set the name and URL of the font in the fonts option:

new FancyProductDesigner(document.getElementById('fpd-target') {
  fonts: [{name: "Pacifico", url: "http://yourdomain.com/fonts/Pacifico.ttf"}]
});
 

To test if the font is available, just enter the URL in a browser. If the URL is correct, the download window will display.


Google Fonts

If you want to use fonts from Google Fonts, you only need to enter the font name in the name property and set the url to "google", so the plugins knows that it has to load the from google fonts server.

new FancyProductDesigner(document.getElementById('fpd-target'), {
  fonts: [
    {name: "Pacifico", url: "http://yourdomain.com/fonts/Pacifico.ttf"}, 
    {name: "Lobster", url: "google"}
  ]
});

  

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article