# 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.

{% hint style="warning" %}
**Important:** Make sure the font you want to use is already installed in your theme or actively loaded; otherwise, it won’t work.
{% endhint %}

For example, to change only the font of the popup title, use the following CSS in [custom-code](https://help.orbe.app/settings/custom-code "mention"):

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

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

{% hint style="info" %}
**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).
{% endhint %}

## Popup element classes

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><strong>Title</strong></td><td><code>.md-modal__header__title span</code></td><td><a href="https://1070558711-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9pRSk2pXNrLaA6YXOW5G%2Fuploads%2FymOFmKfNmq65A5OHG3dK%2Ffont%20title.png?alt=media&#x26;token=56cfa632-7b33-4191-b570-2d085b20c811">font title.png</a></td></tr><tr><td><strong>Text</strong></td><td><code>.md-modal__bodyContent p</code></td><td><a href="https://1070558711-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9pRSk2pXNrLaA6YXOW5G%2Fuploads%2FMxRjJfyJ35i8go9I8mL6%2Ffont%20text.png?alt=media&#x26;token=253729b8-7a5b-4e2b-b08d-abf28623b4fe">font text.png</a></td></tr><tr><td><strong>Helper text</strong></td><td><code>.md-modal__bodyContent__helperText</code></td><td><a href="https://1070558711-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9pRSk2pXNrLaA6YXOW5G%2Fuploads%2Fd9gdggAbvEJmtLLuTPle%2Ffont%20helper%20text.png?alt=media&#x26;token=66fa2045-175f-4660-80a7-fcfa7d01435e">font helper text.png</a></td></tr><tr><td><strong>Labels</strong></td><td><code>.md-modal__formContent__selectLabel</code></td><td><a href="https://1070558711-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9pRSk2pXNrLaA6YXOW5G%2Fuploads%2FVvrAshOuAiu9M4smcucI%2Ffont%20labels.png?alt=media&#x26;token=4cc31551-7d3c-4586-9bf7-d8d101fdf713">font labels.png</a></td></tr><tr><td><strong>Selectors</strong></td><td><code>#md-app-embed__modal .md-form__select, #md-app-embed__modal .md-form__select__country__list-link-wrapper span</code></td><td><a href="https://1070558711-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9pRSk2pXNrLaA6YXOW5G%2Fuploads%2FRffJASIZN03DSGsnM2jg%2Ffont%20selectors.png?alt=media&#x26;token=0b638f0e-330b-45fe-899f-bdd0f0c3d356">font selectors.png</a></td></tr><tr><td><strong>Button</strong></td><td><code>.md-btn__primary</code></td><td><a href="https://1070558711-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9pRSk2pXNrLaA6YXOW5G%2Fuploads%2FEncqNj3TGcc6mYnTvv9V%2Ffont%20button.png?alt=media&#x26;token=8a23fa8c-5c27-401f-b02f-e0379d7738f1">font button.png</a></td></tr></tbody></table>

{% hint style="info" %}
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.
{% endhint %}