Custom fonts from Adobe Fonts can be added to the Interface Builder for customers in our Pro and higher plans. Below is a description of how to install them in the Interface Builder.

First select a font from Adobe Fonts by following their guide:

https://helpx.adobe.com/fonts/using/add-fonts-website.html

Then copy the code provided in the Link area above and place it into the Advanced > Custom Head Tag setting of your Interface as shown below.

Installing the fonts makes them addressable within MetaLocator. This doesn't automatically change any font references already in place.

To address the fonts in an interface first disable the default font as shown below:

image.png (822×583)

Finally, the CSS must be updated to include the following code. Be sure to update the "family" to your selected font. This name is indicated in the Typekit screenshot above.

.metalocator,
.metalocator input,
.metalocator select,
.metalocator button,
.metalocator textarea,
.metalocator .popupWindow
{
font-family: "Bungee", sans-serif !important;
font-weight: 400;
font-style: normal;
}

Be sure to save your changes!

Did this answer your question?