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

# Use the store's font or another custom font

##### Shopify Theme

To change the font of your popup or smart bar to match your Shopify theme font, follow these steps:
1. Go to your Pop Convert popup or smart bar.
2. Click on Design > Custom Styles
3. Enable CSS and add this code:

```css
/*Sets popup or smart bar text to match your Shopify theme font*/

#__pc_app {
--pc-font-family: inherit !important;
}
```

### Custom Font using @import method 

Pop Convert allows imported fonts from [Google Fonts](https://fonts.google.com/). To change the font of your popup or smart bar using a custom font, follow these steps:
1. Go to your Pop Convert popup or smart bar.
2. Click on Design > Custom Styles
3. Enable CSS and add this code:

```css
@import url('https://fonts.googleapis.com/css2?family=Font+Name&display=swap');
```

4. Below the code, add any of these codes depending on how you want your popup or smart bar to look:
 
###### Popups

```css
/*Sets custom font for both the header and main message*/

.pop-content-blocks {
  font-family: 'Font Name' !important;
}
```

```css
/*Sets custom font for the header only*/

.pop-content-blocks h1 {
  font-family: 'Font Name' !important;
}
```

```css
/*Sets custom font for the main message only*/

.pop-content-blocks p {
  font-family: 'Font Name' !important;
}
```

```css
/*Sets custom font for the input text*/

.text-input {
  font-family: 'Font Name' !important;
}
```

```css
/*Sets custom font for the button text*/

.form-block-submit-button {
  font-family: 'Font Name' !important;
}
```

```css
/*Sets custom font for the GDPR text*/

.gdpr-text {
  font-family: 'Font Name' !important;
}
```

```css
/*Sets custom font for the conversion text*/

.pop-thanks-text  {
  font-family: 'Font Name' !important;
}
```


###### Smart Bars

```css
/*Sets custom font for main message*/

.pc-bar {
  font-family: 'Font Name' !important;
}
```

```css
/*Sets custom font for the button text*/

.bar-input-form-submit-button {
  font-family: 'Font Name' !important;
}
```


||| Replace FontName with the name of the font you want to import. 



---



![Example popup with custom font](https://storage.crisp.chat/users/helpdesk/website/70cef36dbfb4ac00/group-1290-1_1qm17ii.png)