General FAQ

How Can I Apply Different Fonts to my Promotions or Widgets?

Heads Up! You will need to have moderate experience with CSS and using the Inspect Element tool within a web browser to apply different fonts to your promotions or widgets.

You can apply hosted fonts to your Promotions or Widgets using CSS (Cascading Style Sheets). We recommend using Google Fonts, as all of these fonts are already hosted.

Applying a New Font to a Promotion

You will first want to locate the font you would like to import. This example will utilize the Regular 400 Quicksand font imported from Google Fonts.

Once you have located the font you would like to use, click on the + Select this style button to the right of the font.

screenshot (4)

You will then see a flyout open to the right. Within that flyout, select the Embed tab and then click on the @import option.

screenshot (5)

Now, you will want to copy the code provided in the box below @import: 

Heads Up! You will not want to copy the actual <style> tags and only copy the information between the <style> tags.

screenshot (6)

Next, you will want to paste the copied code into the Additional CSS option in the Design step of your promotion:

Once you have pasted the import code into your Additional CSS, you will also want to insert the CSS rules also specified in Google Fonts:

screenshot (7)This will need to be placed within your Additional CSS by adding it to the body so it reads:

body {

     font-family: 'Quicksand', sans-serif;

}

The total package will look like this:

screenshot (8)

Once this is done, you will need to specify the text within the promotion you would like to change, and add the font to that area. Here is an example of how to edit the Call to Action text within the Graphic Header template:

screenshot (9)

Tip! You can use the Inspect Element tool within your web browser to locate the code needed to edit the desired text.

Applying a New Font to a Widget

To apply a Google Font to a text area of a Widget, you will follow the exact steps shown above. The only difference will be that you will need to specify the text within the Widget that you would like to change. Here is an example of how to edit the Header Text of your widget:

screenshot (10)

Tip! You can use the Inspect Element tool within your web browser to locate the code needed to edit the desired text.