If you'd like to use a custom font(s) on payment widgets and/or in your customer portal, you can import web fonts by adding a few lines of CSS in your settings.
Tutorial: How to override widget paragraph text with a google web font.
1. Locate a web font that is hosted on the web. In this example, we will use a Google web font from the Google font library (https://fonts.google.com). For this example, the google web font called "Indie Flower" can be found here.
Click "SELECT THIS FONT" to see the specific installation instructions for the font:
2. In the font selection popup window select the @IMPORT embed option.
3. Copy the @import CSS rule WITHOUT the style tags:
@import url('https://fonts.googleapis.com/css?family=Indie+Flower');4. Paste the font import CSS rule into WIDGET(S) and/or in your CUSTOMER PORTAL CSS so it can be used wherever you need to override the default font(s).
WIDGETS > ADVANCED SETTINGS:
CUSTOMER PORTAL DESIGN PAGE:
https://app.paywhirl.com/customer-portal-design
5. Once you have saved your CSS and imported the rule for your custom font, you will be able to override any of the default text stylings in widgets or your customer portal.
For example, if you wanted to change all the paragraph text in PayWhirl to use your custom font you would add a couple of lines of CSS like this below your import rule:
p {
font-family: 'Indie Flower', cursive;
}OR... If you wanted to override ALL text in PayWhirl with another font you could use a rule like this:
* {
font-family: 'Indie Flower', cursive;
}
Related Articles:
Please let us know if you have any questions.
Sincerely,
The PayWhirl Team