Change Fonts

How to change fonts in my PopUp

1. Let’s start with finding more appropriate font – go to Google Fonts page. If you use English in your popup, you have nothing to worry about. For most of other languages with Latin alphabet you’ll have to use Latin Extended, I also want Sans Serif font, let’s use the filtering. I like Lato, let’s use this font – click Add to Collection:

2. Let’s use this Font (you can choose more then one at a time):

3. We have to choose what font styles we’ll need. It will be Normal 400, Bold 700 and Ultra-Bold 900 for me and I’ll need both Latin and Latin Extended fonts. When everything’s selected click @import tab and copy code:

4. On PopUp Wizard Step 2 click on I know what I am doing, let me add some css notification and open Advanced CSS input field:

4. Paste code from Google Fonts:

5. Now we have to find the Text blocks selector name. Right click on text you want to change, Inspect Element (Inspect on Chrome):

6. We see that Class name in our case is .p3 h1:

7. We already know our Class name, so we are ready start to write the code: .p3 h1 { }

9. Now paste it into our code and add another line, I want my font weight 700, so I type font-weight: 700; and that’s it, we changed the Font of Heading. We can save our PopUp now or make some more changes to CSS.

We can set underline, overline or line-trough to our text: .p3 h {text-decoration: overline;}

You can set text-indent in px (fixed indentation in pixels) or % (indentation in % of the width of the parent element). We don’t need indentation since it’s heading we are making changes to, but let’s make it small .p3 h {text-indent: 10px;}