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;
}

Did this answer your question?