How to use custom fonts with PayWhirl

This article will show you how to import a custom font so it can be used in both payment widgets and/or customer portals.

Ryan P. avatar
Written by Ryan P.
Updated over a week ago

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:

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

Did this answer your question?