{"id":580,"date":"2016-02-11T15:39:14","date_gmt":"2016-02-11T15:39:14","guid":{"rendered":"http:\/\/popupdomination.com\/docs\/?p=580"},"modified":"2016-02-11T15:39:14","modified_gmt":"2016-02-11T15:39:14","slug":"change-fonts","status":"publish","type":"post","link":"https:\/\/popupdomination.com\/docs\/change-fonts\/","title":{"rendered":"Change Fonts"},"content":{"rendered":"

How to change fonts in my PopUp<\/h1>\n

1. Let’s start with finding more appropriate font – go to Google Fonts<\/a> 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:<\/h2>\n

\"fonts4\"<\/p>\n

2. Let’s use this Font (you can choose more then one at a time):<\/h2>\n

\"fonts5\"<\/p>\n

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:<\/h2>\n

\"fonts6\"<\/p>\n

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

\"fonts2\"
\n4. Paste code from Google Fonts:<\/h2>\n

\"Capture11\"<\/p>\n

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

\"fonts\"<\/p>\n

6. We see that Class name in our case is .p3 h1<\/em>:<\/h2>\n

\"fonts1\"<\/p>\n

7. We already know our Class name, so we are ready start to write the code: .p3 h1 {\u00a0\u00a0 }<\/em><\/h2>\n

\"fonts7\"<\/p>\n

8. Now let’s return back to Google Fonts page and copy fonts CSS code:<\/h2>\n

\"fonts8\"<\/p>\n

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

\"fonts9\"<\/p>\n

\n

 <\/p>\n

What else text properties can we change using CSS?<\/h1>\n

\n
+<\/span>-<\/span>font-size - specifies the font size of text<\/a><\/div>
<\/p>\n

Normally we would define our font-size<\/em> in px<\/em> (pixels) of %<\/em> (percent or parent element’s font size), however there are much more options:<\/h2>\n