Fonts
By default, Discount Ninja leverages the default font of your theme.
In most cases, this ensures the text rendered by the app fits nicely into the page.
If you want to render text in a different font, use the instructions below to add some custom CSS.
CSS
To add custom CSS to Discount Ninja, go to Settings > General > CSS and add your custom CSS to the field.
What is a font family?
Browsers can apply different fonts to text on a web page. A CSS file can define which text should be shown in which font. To define the font to use for specific text, a font-family property is available in CSS. This property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
More information is available here: https://developer.mozilla.org/en-US/docs/Web/CSS/font-family
How do I know which font family I need?
Open your shop in Google Chrome.
Point to the text that is written in the font you want to use.
Right-click on the text and select "Inspect"
The Google Chrome DevTools will open
Ensure the tab "Elements" is selected
In the pane on the right select the tab "Computed"
Find the value for "font-family"
Product page / Collection page price
Use the following css:
.limoniapps-discountninja-productprice span.money {
font-family: REPLACE-THIS-WITH-YOUR-FONT-FAMILY;
}
Product page banner
Use the following css:
.limoniapps-discountninja-promotioncard-productpage {
font-family: REPLACE-THIS-WITH-YOUR-FONT-FAMILY;
}
Cart promotion code field
Use the following css:
.limoniapps-discountninja-cartdiscountfield-inputandbutton {
font-family: REPLACE-THIS-WITH-YOUR-FONT-FAMILY;
}
Cart promotion summary
Use the following css:
.limoniapps-discountninja-cart-promotionsummary {
font-family: REPLACE-THIS-WITH-YOUR-FONT-FAMILY;
}
Cart text
Use the following css:
.limoniapps-discountninja-cart-item-product-comment span {
font-family: REPLACE-THIS-WITH-YOUR-FONT-FAMILY;
}
Sticky bar
Use the following css:
#limoniapps-discountninja-stickybar-wrapper {
font-family: REPLACE-THIS-WITH-YOUR-FONT-FAMILY;
}
Notification
Use the following css:
.limoniapps-notification {
font-family: REPLACE-THIS-WITH-YOUR-FONT-FAMILY;
}