> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://staging.chrisp.chat/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Using own fonts for the fonts dropdown

You can set up the available fonts, that your customers can choose from, via the [fonts](http://jquerydoc.fancyproductdesigner.com/classes/FancyProductDesignerOptions.defaults.html#property_fonts) option.

## Custom Fonts

You can easily register custom TrueType fonts (ttf).

Move your ttf files in a fonts folder.

![](https://storage.crisp.chat/users/helpdesk/website/-/8/5/e/8/85e881fb5e5ee800/dab46596-fca9-4f66-a2c8-f828bc_1sy2r0s.png)

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](https://fonts.google.com/), 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"}  ]});
```