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 code:
.md-modal__header__title span {
font-family: 'Gluten';
}Replace 'Gluten' with the desired font-family name of your theme.
Accessibility tip: if you change the font or font size, use relative units (like rem or %) instead of fixed pixels. Text should scale up to 200% in browser settings without losing content or functionality (WCAG 2.2 – Resize Text, Level AA).
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.
Last updated
Was this helpful?