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"}
  ]
});