Change popup fonts

To change the font-family of specific parts of the popup, you need to target the appropriate CSS class for that element.

Important: Make sure the font you want to use is already installed in your theme or actively loaded; otherwise, it won’t work.

For example, to change only the font of the popup title, use the following CSS in Custom CSS:

.md-modal__header__title span {
    font-family: 'Gluten';
}

Replace 'Gluten' with the desired font-family name of your theme.

Popup element classes

Title

.md-modal__header__title span

Text

.md-modal__bodyContent p

Helper text

.md-modal__bodyContent__helperText

Labels

.md-modal__formContent__selectLabel

Selectors

#md-app-embed__modal .md-form__select, #md-app-embed__modal .md-form__select__country__list-link-wrapper span

Button

.md-btn__primary

You can also use these CSS classes to apply additional specific styles that are not available in the app embed settings. If a style is already provided in the app embed, please use that option instead.