How to use custom fonts in PostAffiliatePro

A few customers have asked us if they are able to use custom fonts for different segments of PostAffiliatePro. The answer is - Yes! We recommend using Google Fonts - https://fonts.google.com/ since they are free, usable with different programming languages, and easy-to-use. First of all, let's take a look at how to work with Google Fonts.

How to work with   Google Fonts:

Once you reach the Google Fonts website it allows you to filter fonts by font style, languages, or other properties, but if you have a font family name in mind you can search for it directly. Each font family has a plus button in the upper right-hand corner. Click the plus button to add the font family to the "selection drawer" that appears at the bottom of the screen. The "selection drawer" is where you will see all the fonts you’ve added. It’s where you will find the code to add to your website.
 


Click the "selection drawer" to open your font's configuration. This is your last chance to add different font weights, styles, or language support to your font families before adding them to your website. Only add the font weights and styles you know you will need, because the more fonts you add the slower they will load on your site.s.
 


Alright, we are almost done! All you need to do now is copy and paste the @import code into the "mail_html_doc.stpl" template and the CSS rules into the "custom.css" template of any PostAffiliatePro theme (detailed instructions below).

If you’re adding one Google Font to the whole template/theme, you can add the CSS font-family rule into your body tag. Otherwise, you will need to be sure you are adding it to the correct element (class name).



Now, let's see some examples using the following code from Google Fonts:

<style>
/* imports selected fonts - goes to "
main_html_doc.stpl" */
@import url('https://fonts.googleapis.com/css?family=Gayathri|Livvic:400,900&display=swap&subset=latin-ext');
</style>

/* specifies font-family of every element - goes to "custom.css" */
html, body, input {
  font-family: 'Gayathri', sans-serif !important;

}

/* specifies font-family of element with class-name: myFont - goes to "custom.css" */
.myFont {
  font-family: 'Livvic', sans-serif !important; 

}


  • Custom fonts for the Merchant/Affiliate panel
  • Custom fonts for the Landing page

  • Custom fonts for the  Merchant/Affiliate panel

    If you want to use a custom font for the Merchant and/or Affiliate panel, navigate to Configuration --> Design --> Merchant/Affiliate panel --> Edit the active theme (create a copy if you are asked). Search for the "mail_html_doc.stpl" template, open and paste the @import code (see code) together with <style> tags just below the <meta> and <link> tags, and save the template.

     


    Now search for the "custom.css" template, open and paste CSS rules (see code) just under the initial description, and save the template.
     


    Let's say you wish to use the second "Livvic" font for the icon names in the Configuration section. The class name of these names is .IconObjectName. All you need to do is replacing the default .myFont class with the inspected one - .IconObjectName. Save the template and reload the panel.

    To see how to inspect panel elements and how to work with templates in general, visit this guide.



     

    If you cannot see the font being applied, make sure you are using the correct (adjusted) theme! Theme can be changed in the top-right corner of your panel --> Theme settings


    Back to the top

    Custom fonts for the  Landing page

    If you want to use a custom font for the signup/landing page, navigate to Configuration --> Design --> Signup page --> Edit the active theme (create a copy if you are asked). Search for the "mail_html_doc.stpl" template, open and paste the @import code (see code) together with <style> tags just below the <meta> and <link> tags, and save the template.
     


    Now search for the "custom.css" template, open and paste CSS rules (see code) just under the initial description, and save the template.
     


    In case you wish to use different font-families for different elements, just replace the .myFont default class name in the "custom.css" template with another class name from the landing/signup page.

    If you cannot see the font being applied, make sure you marked the adjusted theme as default! You can choose a default theme in Configuration --> Desing --> Signup page

    Back to the top

     

    Related content