> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.metalocator.com/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).

# Adding Custom fonts to the Interface Builder

Fonts from [Adobe Fonts](https://support.metalocator.com/en/articles/1653654-adding-adobe-fonts-to-your-locator) and [Google Fonts](https://support.metalocator.com/en/articles/1655666-using-google-fonts-with-metalocator) can be added to the Interface Builder for customers in our Pro and higher plans.

Custom fonts can be upload to MetaLocator file uploader under tools.

[![](https://storage.crisp.chat/users/helpdesk/website/-/9/9/e/a/99ea686bfe1dc000/3fdcde31-e9c4-4f7a-bddf-9be6ea_3etgo8.png)](https://downloads.intercomcdn.com/i/o/696067404/7904311555bdf09663737842/image.png?expires=1794511800&signature=730fe611d9458704402995bc96a3f85d1e61482ecbaa098ffb152c2dfb05c69a&req=cikhFs95mYFbFb4f3HP0gGX3HFouE%2BkbHE%2FNs4rAiB2Wan5QkVgyfk642If%2B%0Av98C0lqW3X4FKxFkdg%3D%3D%0A)

After uploading the file there are a few interface settings that need to be updated before the font displays properly.

First disable the default font as shown below:

[![](https://storage.crisp.chat/users/helpdesk/website/-/9/0/1/a/901ac343abb01000/c10e20d7-2503-41ee-84bd-ff02bb_1kyuhys.png)](https://downloads.intercomcdn.com/i/o/313364345/52301d4f1ddd4ad926084aa6/image.png?expires=1794511800&signature=fd73b1dc61b1abf271873722bbd6139356cee7f5c8f81a692e75e3b11ed071b5&req=dyEkFc96noVaFb4f3HP0gGixm9a96VEt%2F09FGwaWCum7%2Fjpdg3tQ4mvFnaM1%0A8XPhMwRKCStRdam68A%3D%3D%0A)

Then navigate to the CSS section under additional Style & Color options. Edit the code below to include the appropriate file url/format and select an appropriate font family name. Place the code in the CSS editor and save.

```
@font-face {  
font-family: 'Font Family Name';  
src:  
url('https://d23g0hayoxy5dh.cloudfront.net/ul/7438/images/fonts/font-family-name.woff2') format('woff2'),  
url('https://d23g0hayoxy5dh.cloudfront.net/ul/7438/images/fonts/font-family-name.woff') format('woff');  
}
```

Finally, add the font to the CSS elements and be sure to update the "family" to your selected font.

```
.metalocator,  
.metalocator input,  
.metalocator select,  
.metalocator button,  
.metalocator textarea,  
.metalocator .popupWindow  
{  
 font-family: "Font Family Name",Helvetica,Arial,sans-serif !important;  
}
```

The result will look something like this:

[![](https://storage.crisp.chat/users/helpdesk/website/-/8/c/f/b/8cfb3a98dfbb180/06db78a5-1e6d-4adb-8d20-7e3168_1uv046o.png)](https://downloads.intercomcdn.com/i/o/696074594/7b6461461d886181dd67a253/image.png?expires=1794511800&signature=4042dcc09954dac93017b7a275286da157176a23f8626c63400f94e828e9a3d0&req=cikhFs56mIhbFb4f3HP0gF4qElMnPU2EJbS%2BB23pdXu5ih8d3ROykyoFDdtA%0A10T4ze%2FiSMjViWTqxg%3D%3D%0A)

Be sure to save your changes!