A few customers have asked us if they are able to use custom fonts for different segments of Post Affiliate Pro. The answer is - Yes! We recommend using Google Fonts - https://fonts.google.com/ since they are free 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.
Tip: 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.
Alright, we are almost done! All you need to do now is copy and paste the @import code into the "main_html_doc.stpl" template and the CSS rules into the "custom.css" template of any Post Affiliate Pro 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 or the mini site
If you want to use a custom font, navigate to Configuration --> Design --> Merchant/Affiliate/Signup theme --> Edit the active theme (create a copy if you are asked). Search for the "main_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.